CSS3 Box Shadow Fun

The CSS3 box-shadow property allows us to add shadows to block elements. The property allows us to place shadows outside as well as inside the element. To give us the best chance of having our shadows render correctly, we need to use three parallel properties, each of which should act the same. They are: -moz-box-shadow (for Mozilla Firefox), -webkit-box_shadow (for Safari & Chrome) and box-shadow (for all W3C compliant browsers).

Each of these properties allows us to assign the following: an (optional) inset keyword, left and top offset values, a blue value, and an (optional) spread value.

Below are some examples of what we can do with CSS3 box shadows.

Here is a box with a drop shadow to the right and bottom offset by 5px with a blur of 8px. Here is the CSS:

.shadow5 {
-moz-box-shadow: 5px 5px 8px #888888;
-webkit-box-shadow: 5px 5px 8px #888888;
box-shadow: 5px 5px 8px #888888;
padding:20px;
margin:40px;
background-color:#e0e0e0;
}
Here is a box with a drop shadow to the left and top offset by 10px with a blur of 12px. Here is the CSS:

.shadow10 {
-moz-box-shadow: -10px -10px 12px #888888;
-webkit-box-shadow: -10px -10px 12px #888888;
box-shadow: -10px -10px 12px #888888;
padding:20px;
margin:40px;
background-color:#e0e0e0;
}
There is an optional keyword inset which reverses the direction of the shadow such that the shadow only occurs whithin the limits of the box element. Here is a box with an inset shadow to the right and bottom offset by 0px with a blur of 4px. This causes the shadow to appear on all four sides of the box element. Here is the CSS:

.shadowInset
{
-moz-box-shadow: inset 0px 0px 8px #888;
-webkit-box-shadow: inset 0px 0px 8px #888;
box-shadow: inset 0px 0px 8px #888;
padding:20px;
margin:40px;
background-color:#e0e0c0;
}
It is possible to assign more than one shadow to a box element. Just add additional shadows as a comma delimited list. In this case, I have defined two inset shadows--one lighter than the background color for top and left, one darker than the background for the bottom and right. There is also a drop shadow at 5px left and bottom with a blur of 8px. Here is the CSS:

.shadow3D{
padding:20px;
margin:40px;
background-color:#006296;
color:#fff;
-moz-box-shadow: inset -5px -5px 5px #004970, inset -5px 5px 5px #007BBD, 5px 5px 8px #888;
-webkit-box-shadow: inset -5px -5px 5px #004970, inset -5px 5px 5px #007BBD, 5px 5px 8px #888;
box-shadow: inset -5px -5px 5px #004970, inset -5px 5px 5px #007BBD, 5px 5px 8px #888;
}