Playing with CSS3 box shadow

The new features in CSS3 are amazing. Most modern browsers support many of them so why not start using them. Shadows are common in web designs because they can give depth and detail to any element. The CSS3 shadows are not perfect but do a great job replacing images for simple shadows. The syntax for block shadows is like this:

-moz-box-shadow: (inset) x-offset y-offset blur-radius scale color;
-webkit-box-shadow: (inset) x-offset y-offset blur-radius scale color;
 box-shadow: (inset) x-offset y-offset blur-radius scale color;

The inset, color, scale and blur-radius properties are optional. The x and y coordinates are measured from the top left of the element. So think with a flipped y axis just like in the background-position property. The blur-radius is the "size" of the shadow. The scale parameter is very interesting. As the name says you can shrink or expand a shadow with it. This proves useful to make an element drop a shadow on a single side. Here is an example:

-moz-box-shadow: inset 0 5px 5px -5px rgba(0,0,0,.75); 
-webkit-box-shadow: inset 0 5px 5px -5px rgba(0,0,0,.75); 
box-shadow: inset 0 5px 5px -5px rgba(0,0,0,.75);

If you want to have that shadow to the left side for example you only need to change the offset:

-moz-box-shadow: inset 5px 0 5px -5px #333; 
-webkit-box-shadow: inset 5px 0 5px -5px #333;
box-shadow: inset 5px 0 5px -5px #333;

Box-shadow also supports multiple shadows. The first shadow goes on the top, the last one on the bottom. So using the technique above you can easily add a shadow only to the sides or only to the upper and lower part. You can also do more complex things like adding white shadows at the top of the stack and distort them so that the shadows underneath are stronger in certain parts like the coreners. It's up to your imagination.

-moz-box-shadow: -20px -20px 20px yellow, 20px -20px 20px blue, -20px 20px 20px red, 20px 20px 20px green; 
-webkit-box-shadow: -20px -20px 20px yellow, 20px -20px 20px blue, -20px 20px 20px red, 20px 20px 20px green;
box-shadow: -20px -20px 20px yellow, 20px -20px 20px blue, -20px 20px 20px red, 20px 20px 20px green;

As another example we can add a shadow to all sides but one. To do this we can add a normal grey shadow. It'll be centered and spread 5px. To hide the side we don't want (let's say the bottom) we can put a white (the background color) shadow over it. We must set the spread radius to 0px so we get a solid shadow and set it 5px off the y-axis. Here is the code:

-moz-box-shadow: 0 10px 0 #fff, 0 0 5px #333;
-webkit-box-shadow: 0 10px 0 #fff, 0 0 5px #333;
box-shadow: 0 10px 0 #fff, 0 0 5px #333;

Overall using this property is definitely better than adding an image. Also if the element has its own background we would need extra markup to add the shadow. The only downsides of the CSS3 shadows are that it's not supported in all browsers and that for now you need to add three rules to the stylesheet. A strange issue we have found is that the shadows don't work in Safari if the fourth length parameter (scaling) is used, which is a shame.

Anyways, you can play with this and make cool things like this shiny button:
I like buttons