Pages

Thursday, June 16, 2011

Cross-Browser CSS Box Shadows

I'm starting a series on cross-browser CSS.

Here's how to make a box shadow in Safari, Chrome, Firefox, Opera, and IE5.5+

.box-shadow
{

/* parameters: horizontal-offset vertical-offset blur-radius color*/

-moz-box-shadow:5px 5px 5px #cccccc; /*ff3.5+*/

-webkit-box-shadow:5px 5px 5px #cccccc; /*safari3.2+*/

box-shadow:5px 5px 5px #cccccc; /*chrome3+, opera10.5+, ie9+*/

/* strength=shadow length. direction=angle in degrees clockwise from midnight. color=name or #nnnnnn*/

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color=#cccccc); /*ie5.5-8*/

zoom:1; /*iefix*/

}

No comments:

Post a Comment