Box Shadow Translator For IE

HTML & CSS
1

I have a box shadow written (Content .shadow) that works well in most all browsers except for IE. I found an article showing the -ms-filter and -filter add ons but I cannot figure out how to translate or convert the different properties. With the -filter properties, I don’t see that many options for blur, h-shadow, v-shadow, and spread. Does “strength” translate to “spread” and so on…?


.shadow {
-webkit-box-shadow: 0 -11px 22px -8px #777;
-moz-box-shadow: 0 -11px 22px -8px #777;
box-shadow: 0 -11px 22px -8px #777;

/* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=0, Color='#777777')";

/* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=0, Color='#777777');

}

LINK-
http://thisiswhereiplay.com/about-us/

Thanks in advance to anyone who can help me out here.
Todd

2

Did you look here? http://msdn.microsoft.com/en-us/library/ie/ms532985(v=vs.85).aspx

Out of curiousity - Does your site have the marketshare to require you to support below IE8? Is it worth your effort for a drop shadow?

3

Dave, I did not look there but I will take a peek. Not sure about the marketshare requirement, but the client is using that specific browser; so that makes it important.

4

ugh. understandable why you’re supporting it but still - ugh.

Here’s another link you might find useful: http://hedgerwow.appspot.com/demo/shadow

5

I use this: http://css3pie.com/

The filter property tends to be a pain to work with.

6

I hardly write the code my own, usually I relied on CSS generators.

Box shadow tool:
http://www.css3.me/ (IE7 and IE8 unsupported CSS3 element)

If above tool not working, you may try the alternative generators
http://www.alt.com.my/news/improve-web-design-productivity-with-70-excellent-and-yet-free-css-generators/