Crossbrowser CSS dropshadows and Blur effects

In past,I had problem with blur effect so I added mootool in my website and some css3 property which was not working in IE. but now I can use CSS filter without any JavaScript.

First of all, the blur filter allows you to blur elements in IE

<div style=’background:blue;height:100px;width:100px;

filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);

-ms-filter:”progid:DXImageTransform.Microsoft.Blur(pixelradius=5)”;’>

</div>

Moreover,you can Create the drop shadow and Inner shadow in IE which is very nice..

.black-shadow {

-moz-box-shadow: 4px 4px 8px #000;

-webkit-box-shadow: 4px 4px 8px #000;

box-shadow: 4px 4px 8px #000;

filter: progid:DXImageTransform.Microsoft.Shadow (color=#000000,direction=90,strength=8)

progid:DXImageTransform.Microsoft.Shadow (color=#000000,direction=180,strength=8)

}

http://dev.opera.com/articles/view/cross-browser-box-shadows/

http://samples.msdn.microsoft.com/workshop/samples/author/filter/blur.htm

About the Author