Introduction

CSS3 is really starting to gather momentum with many of the commands outlined in theCSS3 working draft supported by Firefox, Safari and Google Chrome. We thought we'd put together some of our favourites. Before we get started,CSS3 commands require browser specific syntax for them to work.

For Mozilla Firefox, we need to use the-moz- prefix, for example:

-moz-border-radius:

And for Safari, the-webkit- prefix, for example:

-webkit-border-radius:

1. Border Radius

TheCSS3 border radius command creates curved corners on an element. Instead of using 4 or more images tocreate curved corners, use the following commands:

#box1{border: 1px solid #699;/* for Mozilla Firefox */-moz-border-radius: 20px;/* for Safari & Google Chrome */-webkit-border-radius: 20px;}

2. Box Shadow

A shadow can be applied to elements using theCSS3 box shadow command. The box shadow accepts three numeric values plus a colour to apply this effect. These numbers are:

1. Distance of horizontal offset of shadow - A positive value means the shadow will cast to the right and a negative value to the left
2. Distance of vertical offset of shadow - A positive value means the shadow will cast below and a negative value above
3. How blurry you'd like the shadow

With the addition of a colour value, the shadow is complete:

#box2{/* Not mandatory for the box shadow effect */border:1px solid #699;/* for Mozilla Firefox */-moz-box-shadow: 5px 5px 5px #b6ebf7;/* for Safari & Google Chrome */-webkit-box-shadow: 5x 5px 5px #b6ebf7;}

3. Transparency or RGBA

Transparency has always been tricky. Different browsers historically have applied transparency using different commands. Continuing this cross-browser inconsistency, we have the addition of the newCSS3 RGBA background property, however in principle this command is more logical. The command consists of 4 values - the first, second and third are the red, green & blue values (0-255) respectively followed by the alpha channel or transparency (0-1).

For the RGBA command, the browser specific prefixes (-moz-,-webkit-) aren't required:

#box3{background-color: rgba(110, 142, 185, .5);}

The background colour command adds a nice blue-grey background at .5 or 50% opacity in browsers that understand theCSS3 RGBA property.

Unfortunately, Internet Explorer will also attempt to render the background colour command but not understand RGBA. To ensure that the background colour is also set in Internet Explorer, an Internet Explorer-only hack is required. In the following example, the:last-child psuedo selector which Internet Explorer doesn't understand is used to exclude it.

#box3{/* For all browsers */background-color: #6e8eb9;}body:last-child #box3{/* Exclude all IE browsers using:last-child */background-color: rgba(110, 142, 185, .5)!important;}

4. Columns

The ability to add columns has been added toCSS3. Rather than floating elements within containers, we can set the column number, width and rule:

#box4{/* Not mandatory for the column property */border: 1px solid #699;/* for Mozilla Firefox */-moz-column-count: 2;-moz-column-gap: 20px;-moz-column-rule: 1px solid #6e8eb9;/* for Safari & Google Chrome */-webkit-column-count: 2;-webkit-column-gap: 20px;-webkit-column-rule: 1px solid #6e8eb9;}

5. Multiple Background Images

Background imagery has always been restrictive when it comes to CSS due to the fact you can only apply one background image per element. This isn't the case withCSS3 which allows multiple images per element by simply comma-separating them.

To place an image on both the left and right of an element, you can use the following commands, with a little styling:

#box5 blockquote{background:url(/i/quotel.gif) no-repeat 0 0, url(/i/quoter.gif) no-repeat 100% 0;border:1px solid #699;padding:0 20px;}

This command will be mis-rendered by Internet Explorer as it doesn't accept 2 background images on a single element. An exclude all Internet Explorer hack is required.

#box5 blockquote{/* For all browsers, just an open quote */background: url(/i/quotel.gif) 0 0 no-repeat;padding: 0 20px;}body:last-child #box5 blockquote{/* Exclude all IE browsers using:last-child *//* Then the two images */background: url(/i/quotel.gif) no-repeat 0 0, url(/i/quoter.gif) no-repeat 100% 0;}

6. Box-sizing - Old School Box Model

We couldn't not include this in a top tenCSS3 top tips as it made us all nostalgic and warm thinking about Internet Explorer 5. Every element of the page is, of course rendered using the box model and the ordering of the box model has always been both important and unintuitive.

The standard W3C box model that we've all become familiar is now a settable property of an element using the followingCSS3 commandbox-sizing: content-box.

#box6{width: 200px;padding: 10px;/* for Mozilla Firefox */-moz-box-sizing: content-box;/* for IE8 */box-sizing: content-box;/* for Safari & Google Chrome */-webkit-box-sizing: content-box;}

TheCSS3 commandbox-sizing also acceptsborder-box which places the padding inside of the width, just like Internet Explorer 5!:

#box6b{width: 200px;padding: 10px;/* for Mozilla Firefox */-moz-box-sizing: border-box;/*for IE8 */box-sizing: border-box;/* for Safari & Google Chrome */-webkit-box-sizing: border-box;}

For more information about the box model, take a look at our now historically significantInternet Explorer & CSS issues article.

7. Outlines

Outilines are included in theCSS3 specification and allow both a border and an outline to be applied to a single element.

The outline property is identical to the border command. The additional offset property however allows the border to be moved further inside or outside of the element.

#box7{border: 1px solid #000;outline: 1px solid #699;outline-offset: -9px;}

8. Background Gradients

CSS3 background gradients are extremely flexible and can be used to create complex patterns. At its simplest, the CSS linear gradient allows a gradient to be applied to an element from top to bottom and left to right.

This example of aCSS3 gradient in Mozilla Firefox applies a light blue gradient at the bottom of a box for just 20% of the boxes' height

#box8{/* for Mozilla Firefox */background: -moz-linear-gradient(bottom, #b6ebf7, #fff 20%);}

Safari uses a less intuitive but more flexible approach using colour stop values. An example of the Safari specific code follows (note the linear is included in brackets instead of outside):

#box8{background: -webkit-gradient(linear, left bottom, left top,color-stop(0, #b6ebf7), color-stop(0.20, #fff));}

9. Rotation

CSS3 also allows rotation of elements using the transform command, with the rotate property accepting degrees as a parameter.

#box9{-moz-transform: rotate(2deg);-webkit-transform: rotate(2deg);}

10. Animation

And finally just for Safari users or Firefox 4 beta users, we have transitions. Transitions include rotation, easing in and out of elements and the ability to specify how many times they do this... and much more!

A simple example might include changing the hover effect of a link so the colour changes smoothly from one colour to another.

Both Safari and Firefox 4 support this functionality consistently.

First define a link colour:

.box a{color: #0f0;}

Set a colour and the property to animate using thetransition-property:

#box10 a:hover{color: #0f0;-moz-transition-property: color;-webkit-transition-property: color;}

How long should the animation last:

#box10 a:hover{color: #0f0;-moz-transition-property: color;-webkit-transition-property: color;-moz-transition-duration: 0.5s;-webkit-transition-duration: 0.5s;}

What animation type should be used (including ease, linear, ease-in, ease-out and more!):

#box10 a:hover{color:#31801f;-moz-transition-property: color;-webkit-transition-property: color;-moz-transition-duration: 0.5s;-webkit-transition-duration: 0.5s;-moz-transition-timing-function: ease;-webkit-transition-timing-function: ease;}

There are many more ways to animate elements and theCSS3 transition working draft outlines these in great detail.

Conclusion

I hope you found our top tenCSS3 tips useful! These newCSS3 commands mark an exciting new era in web design and development and usingCSS3 we can look forward to a more vibrant World Wide Web!

This article was written by Paul McCarthy, head of web development at theuser experience consultancy, Webcredible. He's passionate aboutCSS and using JavaScript for good (not evil), loves spending his time working on the world's mosteasy-to-use & accessibleCMS and is very good atjQuery training. 

History

• 12^th August, 2010: Initial release

This article, along with any associated source code and files, is licensed underThe Code Project Open License (CPOL)