Oct 2011 04

Creating CSS 3 Drop Shadows for All Browsers0

Posted In Web Development

To add a drop shadow to an element using CSS, just add the following code to your CSS

.shadow {
-moz-box-shadow: 3px 3px 4px #000; // for firefox
-webkit-box-shadow: 3px 3px 4px #000; // for chrome and safari
box-shadow: 3px 3px 4px #000; // for CSS3-supported browsers
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";/* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');/* For IE 5.5 - 7 */
}

If a browser doesn’t support drop shadows, it just won’t show them.

To change the direction and size and opacity of the drop shadow, tweak the values. Learn more at http://www.css3.info/preview/box-shadow/

Share

Leave a Comment