The box-shadow property of CSS3 allows us to add a highly customizable drop shadows to elements of our site without using images. We can add a drop shadow to almost anything – from images to buttons to div tags. The box-shadow property is supported by all the usual standards-compliant browsers (Firefox, Safari, Chrome, Opera, etc.). The basic syntax for using the box-shadow property looks like this:
1 | box-shadow: horizontal-value vertical-value blur color; |
1 2 3 | box-shadow: 5px 5px 5px #818181; -webkit-box-shadow: 5px 5px 5px #818181; -moz-box-shadow: 5px 5px 5px #818181; |
A positive horizontal value (i.e. 15px) will drop a shadow to the right of a box. A negative value (i.e. -15px) will drop a shadow to the left.
A positive vertical value (i.e. 15px) will drop a shadow above a box. A negative value (i.e. -15px) will drop a shadow below.
A positive blur value (i.e. 3px) increases the blur of the shadow. By default, this value is set to zero. A negative value actually decreases the size of the shadow.
Internet Explorer does not support the CSS3 drop-shadow element. However, it does support a simple drop shadow effect through a proprietary “drop-shadow” filter. To set a drop shadow for Internet Explorer, we will need to use the following syntax:
1 | filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true); |
It is en vogue right now to set a drop shadow from a wrapper div that drops in every direction (above, below, left, and right). To do this, set the vertical and horizontal values of box-shadow to zero with a blur of a few pixels:
1 2 3 4 | box-shadow: 0px 0px 5px #818181; -webkit-box-shadow: 0px 0px 5px #818181; -moz-box-shadow: 0px 0px 5px #818181; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=0, offY=0, positive=true); |
For additional reading, see:
http://www.dynamicdrive.com/style/csslibrary/item/css3_box_shadows_box_shadow_property/