Box shadows with fallbacks for all browsers support including IE

on May 18, 2013
Box Shadow
Box Shadow

Here is a solution to shadow your HTML elements such that you don't have to compromise your design with Internet Explorer.



DEMO

This div element has a nice shadow around it.

HTML

<div class="shadow" style="padding:50px 50px;display:inline-block;">

  This div element has a nice shadow around it.

</div>

CSS

.shadow{
 -webkit-box-shadow: 0px 3px 3px  #000000;
 -moz-box-shadow: 0px 3px 3px #000000;
 box-shadow: 0px 3px 3px #000000;
 /* IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=125, Color='#000000')"
 "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
 /* IE 7 and lower */
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=125, Color='#000000')
 progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
}
comments powered by Disqus
© www.frontendlab.net. Powered by Blogger.