5 CSS3 Design Enhancements That You Can Use Today

3. Text Shadows

Supporting Browsers: Apple Safari 3, Firefox 3.0.5, Google Chrome 1

Add a shadow underneath any text, controlling the left/right and up/down offset, as well as the color:

text-shadow: x y blur color;

You can combine the text shadow with a transparent color to control the darkness of the shadow:

text-shadow: -2px 2px 10px rgba(0,0,0,.5);

You can also include multiple text shadows just by repeating the values separated by a comma:

text-shadow:   0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 
15px -4px 3px rgba(255,0,0,.75);

text shadow.jpg

4. Box Shadows

Supporting Browsers: Apple Safari 4, Firefox 3, Google Chrome 1

Adding a drop shadow to any box on the screen follows the same format as adding a text shadow:

box-shadow: x y blur color;

Just like text-shadows, Mozilla and Webkit have implemented their own vocabulary in advance of the final CSS standard:

-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);

You can add multiple shadows just by including multiple values separated by spaces:

-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 
15px -20px 20px rgba(255,0,0,.75);
-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);
box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);

box shadow.jpg

5. Multiple Backgrounds

Supporting Browsers: Apple Safari 1.3, Google Chrome 1

Including multiple background images in a single element simply requires additional sets of values to be added to the background properties, separated by commas. You should include a single background image as a back-up for other browsers:

background-image: url(astro-127531.png);
background-image: url(astro-127531.png),url(Hubble-112993.png);
background-repeat: no-repeat;
background-position: bottom left;
background-position: bottom left, top right;

multiple background.jpg

SPECIAL BONUS

Rotate Anything!

Supporting Browsers: Apple Safari 4, Firefox 3.5, Chrome 1

Although not even a part of the CSS3 specification yet, Webkit has implemented its own transformation property, which Mozilla is following suit with. Transform can include a number of different value types, but one of the most intriguing—and useful as a design enhancement — is rotate:

-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);

Appearance as seen in browsers that do not support CSS3 (e.g. Opera 9)

no support.jpg

See the live working example (requires Safari 4+, Firefox 3.5+, or Chrome 1+)