adding shadows

I'm working on a layout and I wanted to add a shadow to my entries. The reason is that I wanted the entries to look like they where lifted from the background. I went on a hunt and found out it's browser compatible.



CSS3 is not there yet for every browser but that doesn't mean you can't add a shadow to various browsers

This should work for Firefox 3.5+, Safari 3+, Google Chrome, Opera 10.50, Internet Explorer 5.5+

Firefox/Mozilla
-moz-box-shadow: 3px 3px 4px #000;

Safari/Chrome
-webkit-box-shadow: 3px 3px 4px #000;

Opera
box-shadow: 3px 3px 4px #000;

IE 8
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

Voor IE 5.5 - 7
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');}

Now if you want a shadow on all sides then that's also possible. It works in FF and IE 9. I suppose if you add the other codes it should also work in the other browsers. But I don't use them so I can't test them.

Firefox
-moz-box-shadow: 0 0 1em #dddddd;

Safari/Chrome
-webkit-box-shadow: 0 0 1em #dddddd;

Opera
box-shadow: 0 0 1em #dddddd;

IE 9
filter: progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=2)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=2)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=2)
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=2)