Full width home advertisement

Post Page Advertisement [Top]

Box shadow


This post will shows you how to enable box-shadow for Internet Explorer 8 and lower versions by using the IE-only none-standard filter property. However, we use "box-shadow" in different browsers (except IE) like bellow:


.shadow{
   -moz-box-shadow: 3px 3px 5px 6px #ccc; /* For Mozilla */
   -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* For Chrome & Safari */
    box-shadow: 3px 3px 5px 6px #ccc;  /* CSS */
}

But in IE8 or in the earlier versions doesn’t have any kinds of prefix. So, what can we do…?? 
We just need to add some extra code like bellow. After that this problem will be vanish.
See the code bellow:


.shadow{
   -moz-box-shadow: 3px 3px 5px 6px #ccc; /* For Mozilla */
   -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* For Chrome & Safari */
    box-shadow: 3px 3px 5px 6px #ccc;  /* CSS */
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
    zoom: 1;


body:last-child .box-shadow{
filter: none; /* Remove filter from IE9 */
}


Last-child is the selector of CSS3. This will remove the filter on IE9 that supports CSS3.
And with this, you will finished your task. For any information please comment bellow..

Bottom Ad [Post Page]