Box Shadows - Cross platform CSS

Been looking at different ways to implement box shadows in pure css, came up with one solution.


Inside your html file

<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="css/ie.css"><![endif]-->

ie.css

.boxShadow {
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#2A2A2A,direction=0,strength=5)
progid:DXImageTransform.Microsoft.Shadow(color=#2A2A2A,direction=90,strength=5)
progid:DXImageTransform.Microsoft.Shadow(color=#2A2A2A,direction=180,strength=5)
progid:DXImageTransform.Microsoft.Shadow(color=#2A2A2A,direction=270,strength=5);
border:1px solid #2A2A2A;
}
.boxShadow .flash{
position:relative ;
top:5px ; /* pixel here represents pixel of the border */
left:5px; /* pixel here represents pixel of the border */
}
.boxShadowImg{ /* ie would not follow the width of the parent */
width:1px;
}
.boxShadow  .img{ /* just pull up the image, -5px works in border (Seems) */
margin-bottom:-5px;
}

then if your using image you could use this format

<div class="boxShadow boxShadowImg">
<img class="img" src="http://lh3.ggpht.com/_jcJUn2Pvhc0/SOjadh2c34I/AAAAAAAAAQg/uFDfRRCMsgA/s720/P4260134.JPG" />
</div>

then if you have a flash (with swfobject)

<div class="boxShadow">
<div class="flash">
<div id="flashContent"></div>
</div>
</div>

Standard browser, the color would be different from IE, play around with it

-webkit-box-shadow: #111 0px 0px 10px;
-moz-box-shadow: #111 0px 0px 10px;
box-shadow:#111 0px 0px 10px;

Hope this helps