Skip to main content

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

Comments

Popular posts from this blog

Unlockd Android Auto Open

Now that Unlockd has reached its doomed. Here is a script where i just downloaded android tools and automatically have my phone open, I believe you can use this for games that requires constant tapping of the screen (as long as it's not one of the fast tap one as adb has a delay). for i in `seq 1 50`; do # open the phone adb shell input keyevent 26 # keep the phone open for 8 seconds sleep 8 # close the phone adb shell input keyevent 26 # randomised sleep to make it look real sleep $[ ( $RANDOM % 10 ) + 1 ]s done if your phone has passcode for i in `seq 1 50`; do adb shell input keyevent 26 sleep 1 # swipe from bottom to up adb shell input touchscreen swipe 530 1280 1030 480 # enter your passcode adb shell input text <Your passcode> # check button adb shell input keyevent 66 sleep 8 adb shell input keyevent 26 sl…