Been looking at different ways to implement box shadows in pure css, came up with one solution.
Inside your html file
ie.css
then if your using image you could use this format
then if you have a flash (with swfobject)
Standard browser, the color would be different from IE, play around with it
Hope this helps
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;
}
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>
<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>
<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;
-moz-box-shadow: #111 0px 0px 10px;
box-shadow:#111 0px 0px 10px;
Hope this helps
Comments
Post a Comment