CSS3 Selectors

CSS works by defining the styles of the elements on a Web page using CSS rules. Rules are applied using selectors, which come in three basic varieties:

• HTML selectors are used to reference a specific tag; 
• Class selectors, which are applied individually to elements; 
• An ID selector that is applied to a single element on the page. 

You will use these three basic selectors constantly, and they are the best place to start.

Here is a list of CSS3 Selectors:

• :root - is the top level element in a document Compatibility: FF1.5, O9.5, S3.1,C3
• :empty - has no children Compatibility: FF1.5, O9.5, S3.1,C3
• :only-child - has no siblings Compatibility: FF1.5, O9.5, S3.1,C3
• :only-of-type - has its unique selector among its siblings Compatibility: FF1.5, O9.5, S3.1, C3
• :nth-of-type(n) - is the nth element with that selector Compatibility: FF1.5, O9.5, S3.1,C3
• :nth-last-of-type(n) - is the nth element with that selector from the last element with that selector Compatibility: FF1.5, O9.5, S3.1, C3
• :last-child - is the last child in the parent element Compatibility: FF1.5, O9.5, S3.1, C3
• :first-of-type - is the first of its selector type in the parent element Compatibility: FF1.5, O9.5, S3.1, C3
• :last-of-type - is the last of its selector type in the parent element Compatibility: FF1.5, O9.5, S3.1, C3
• :not(s) - is not using specific selectors Compatibility: FF1.5, O9.5, S3.1, C3
• [attr^="value"] - Begins with has specified attribute equal to exact value at beginning
• [attr$="value"] - Ends With has specified attribute equal to exact value at end
• [attr*="value"] - Contains has specified attribute equal to exact value anywhere

Here are examples:

• Alice
• The White Rabbit
• The Mad Hatter
• The Queen of Hearts
• The Door Mouse

CSS3 Gradient Background

Linear Gradient 

Top → Bottom:

1. /* fallback */
2. background-color: #1a82f7;
3. background-repeat: repeat-x;
4.  
5. /* Safari 4-5, Chrome 1-9 */
6. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
7.  
8. /* Safari 5.1, Chrome 10+ */
9. background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
10.  
11. /* Firefox 3.6+ */
12. background: -moz-linear-gradient(top, #2F2727, #1a82f7);
13.  
14. /* IE 10 */
15. background: -ms-linear-gradient(top, #2F2727, #1a82f7);
17. /* Opera 11.10+ */
18. background: -o-linear-gradient(top, #2F2727, #1a82f7);

Here is the result:

Left → Right

1. /* fallback */
2. background-color: #1a82f7;
3. background-repeat: repeat-y;
5. /* Safari 4-5, Chrome 1-9 */
6. background: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727));
8. /* Safari 5.1, Chrome 10+ */
9. background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
10.  
11. /* Firefox 3.6+ */
12. background: -moz-linear-gradient(left, #2F2727, #1a82f7);
13.  
14. /* IE 10 */
15. background: -ms-linear-gradient(left, #2F2727, #1a82f7);
16.  
17. /* Opera 11.10+ */
18. background: -o-linear-gradient(left, #2F2727, #1a82f7);

Here is the result:

With Even Stops:

1. /* fallback DIY*/
2.  
3. /* Safari 4-5, Chrome 1-9 */
4. background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727));
5.  
6. /* Safari 5.1+, Chrome 10+ */
7. background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
8.  
9. /* Firefox 3.6+ */
10. background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
11.  
12. /* IE 10 */
13. background: -ms-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
14.  
15. /* Opera 11.10+ */
16. background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);

With Specified Arbitrary Stops

1. /* Safari 4-5, Chrome 1-9 */
2. background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));
3.  
4. /* Safari 5.1+, Chrome 10+ */
5. background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
6.  
7. /* Firefox 3.6+ */
8. background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
9.  
10. /* IE 10 */
11. background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
12.  
13. /* Opera 11.10+ */
14. background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

Radial Gradient 

Centered and Full Size

1. /* fallback */
2. background-color: #2F2727;
3. background-position: center center;
4. background-repeat: no-repeat;
5.  
6. /* Safari 4-5, Chrome 1-9 */  
7. background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
8.  
9. /* Safari 5.1+, Chrome 10+ */
10. background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
12. /* Firefox 3.6+ */
13. background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
14.  
15. /* IE 10 */
16. background: -ms-radial-gradient(circle, #1a82f7, #2F2727);
17.  
18. /* Opera cannot do radial gradients yet */

Positioned and Sized
Note: Not Consistent Among Browsers

1. /* fallback */
2. background-color: #2F2727;
3. background-position: 80% 20%;
4. background-repeat: no-repeat;
5.  
6. /* Safari 4-5, Chrome 1-9 */
7. background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#1a82f7), to(#2F2727));
8.  
9. /* Safari 5.1+, Chrome 10+ */
10. background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
11.  
12. /* Firefox 3.6+ */
13. background: -moz-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
14.  
15. /* IE 10 */
16. background: -ms-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
17.  
18. /* Opera cannot do radial gradients yet */

Shape keywords: circle, ellipse Size keywords: closest-side, closest-corner, farthest-side, farthest-corner, contain, cover

CSS3 Rounded Corners

CSS3 Rounded Corners

Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.

In CSS3, creating rounded corners is easy.

In CSS3, the border-radius property is used to create rounded corners:

This box has rounded corners!

Here's the code of this:

1. border:2px solid;
2. border-radius:25px;

Multiple Background images with CSS3

Layering multiple background images
The background of a box can have multiple layers in CSS3. The number of layers is determined by the number of comma-separated values in the ‘background-image’ property. Note that a value of ‘none’ still creates a layer.


Here’s a example:

Here’s the code for this:

1. width: 500px;
2. height: 150px;
3. background-image: url(boll.png),  url(VectorBackgrounds11.jpg);
4. background-position: center bottom, left top;
5. background-repeat: no-repeat;

Text-shadow using CSS3

Text-shadow using CSS3


CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow. The text-shadow property is used as follows:

1. text-shadow: 2px 2px 2px #000;

The text-shadow property is supported in all major browsers, except Internet Explorer. The text-shadow property applies shadow to text.

1. text-shadow: horizontal-shadow vertical-shadow blur color;

The text-shadow property attaches one or more shadows to text. The property is a comma-separated list of shadows, each specified by 2 or 3 length values and an optional color. Omitted lengths are 0.

1. text-shadow: 0 0 4px white, 0 -5px 4px #FF3, 2px -10px 6px #FD3, -2px -15px 11px #F80, 2px -25px 18px #F20;

Hello Text Shadow

CSS3 border-image using images for your border

Another exciting new border feature of CSS3 is the property border-image. With this feature you can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image. These two values are shorthands for:

• border-image:
  • border-top-image
  • border-right-image
  • border-bottom-image
  • border-left-image

• border-corner-image:
  • border-top-left-image
  • border-top-right-image
  • border-bottom-left-image
  • border-bottom-right-image

1. border-image: url(border.png) 27 27 27 27 round round;

Hello Border Image