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

LaMetric Python App

Creating a personal stock app for LaMetric is super simple, all you need is create an account at developer.lametric.com and have an url with your data. Depending on how you want the data to appear, the format should be in json and how it appears in the creation process.

I used appengine to host my data and used the metric data format


Here is the python code
import urllib2 import json # get stocks data using yahoo finance stocks = ['0002.HK', '0005.HK', '0011.HK', '0992.HK', '0066.HK'] url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + ("%22%2C%22".join(stocks)) + "%22)%0A%09%09&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json" result = urllib2.urlopen(url) data = json.loads(result.read()) # create frames based on the metric data format frames = [] for stock in data['query']['results']['quote']: …