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.

Drop Shadow Fix for Internet Explorer 8


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:

ColorSets the value of the color applied
DirectionSets the direction that the filter's effect is offset.
EnabledSets or retrieves a value that indicates whether the filter is enabled.
StrengthSets 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');


1 comment :

  1. Thanks for this tips man !!
    http://top5buzz.com/

    ReplyDelete