Technical Solution

How to add shadow effect to your div blocks with cross-browser compatible CSS

Tintu.manuel | | 1 min read

Cross browser compatibility is one of the most important concerns of an HTML/CSS developer. Here’s how you can easily add shadow effect to your div blocks with cross-browser compatible CSS. Simply add the below code to the div to which the effect is to be added. You can change the size, strength and direction of the shadow in all browsers, except for IE, in which you can change only the strength and direction of the shadow.

CSS:
.shadow{
border:3px double #fff;
background-color:#e6e6e6;
-moz-box-shadow: 4px 6px 12px #dfdfdf;
-webkit-box-shadow: 4px 6px 12px #dfdfdf;
box-shadow: 4px 6px 12px #dfdfdf;
/* For IE 8 /
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=13, Direction=135, Color='#dfdfdf')";
/ For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=13, Direction=135, Color='#dfdfdf');
}

This code will work from IE 5.5 to the latest versions and in other popular browsers like Firefox, Chrome, Safari and Opera.

 

 

Related Topics