The CSS3 box-shadow property allows a web designer or developer to add drop shadows or inner shadows to HTML elements without using images or inhibiting performance.
By including drop shadows in CSS, it should be possible to use fewer images, which may make a given web page faster loading, more accessible, and more flexible.
The box-shadow property takes up to five parameters, and will look something like this example.
box-shadow: 7px 7px 4px 2px #ababab;
Horizontal Offset
The first length, "7px," represents the shadow's horizontal offset. A positive number, as in the example, moves the shadow to the right of the element it is associated with, while a negative number positions the shadow to the left of its element.
Vertical Offset
The next length in the example, box-shadow: 7px 7px 4px 2px #ababab;, represents the vertical offset. A positive number here will position the shadow below it associated element as seen in the examples above. A negative value will position the shadow above the element.
Blurr
In the example, the length, "4px," represents a blur distance. Negative numbers are not allowed, and a blur value of "0" creates a shadow with a hard edge.
Spread
The final length describes how far the shadow should spread. Here a positive number causes the shadow to increase in size in all directions. A negative value will cause the shadow to contract.
Color
In the example, the last parameter is shadow color as set with hex code. The CSS3 standard actually allows a the use of an rgba color declaration, which individually sets values for red, green, blue, and alpha transparency. Unfortunately, most browsers don't yet support rgba for shadows.
Inset
A final parameter—the keyword "inset"—may be added to create an inner shadow.
box-shadow: 7px 7px 4px -2px #ababab inset;
Adjusting the blur and spread length will create several different looks for the inner shadow.
Firefox, Chrome, and Safari
For the time being, Mozilla Firefox, Google Chrome, and Apple Safari all require a prefix for the box-shadow property.
In Firefox, that prefix is -mox-, while in WebKit, which powers both Chrome and Safari, the prefix is -webkit-. So I need to add a couple of repetitive lines to my style sheet.
box-shadow: 7px 7px 4px 2px #ababab; -webkit-box-shadow: 7px 7px 4px 2px #ababab; -moz-box-shadow: 7px 7px 4px 2px #ababab;
Internet Explorer
Internet Explorer (IE) is the odd browser out, not supporting this powerful CSS3 property in any form. Fortunately, there is another way to get a similar effect in IE, so you can use this technique across the four leading browsers.
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
