CSS Drop Shadow Fix for Internet Explorer 8

CSS3 uses box-shadow to place a nice drop shadow to your containers such as div. Though, the main enemy of web designers gives them problems by not supporting it -- Yes! I'm talking about Internet Explorer. Apparently, lower versions of IE starting from 8 does not support this attribute.

Though we can say that with this era, only few people are using Internet Explorer 8 and below, we can't be sure that no one would try to access our site on these browser versions.

The Usual Way

Since CSS3's box-shadow is already supported on major browsers such as Chrome, Firefox and Safari. Most sites already applied this property on their code's styles.

The basic way of adding a shadow requires the following CSS attributes:

box-shadow: h-shadow v-shadow [blur spread] color;

Here is an example on how it is used:

-moz-box-shadow: 5px 5px 5px #d3d3d3;
-webkit-box-shadow: 5px 5px 5px #d3d3d3;
box-shadow: 5px 5px 5px #d3d3d3;

The code above should only work on Firefox, chrome and safari. Internet Explorer 9 has been announced to support this property too.

How about lower version of IE?

To resolve this, we need to use the Visual Filters and Transitions. (This is already deprecated in IE9, again box-shadow is already supported as of this version)

filter:progid:DXImageTransform.Microsoft.Shadow(properties)

The properties that you can use are the following:

Color	Sets the value of the color applied
Direction	Sets the direction that the filter's effect is offset.
Enabled	Sets or retrieves a value that indicates whether the filter is enabled.
Strength	Sets the distance that a filter effect extends.

This is how it should look like on actual code:

/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=170, Color='#d3d3d3')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#d3d3d3');

Combined Styling

Both the CSS3 box-shadow code and Visual Filters can be combined in one block:

-moz-box-shadow: 5px 5px 5px #d3d3d3;
-webkit-box-shadow: 5px 5px 5px #d3d3d3;
box-shadow: 5px 5px 5px #d3d3d3;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=170, Color='#d3d3d3')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#d3d3d3');