todd_temple — 2013-04-25T11:05:53-04:00 — #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...?
-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');
Thanks in advance to anyone who can help me out here.
davemaxwell — 2013-04-25T13:29:40-04:00 — #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?
todd_temple — 2013-04-25T13:35:56-04:00 — #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.
davemaxwell — 2013-04-25T14:09:22-04:00 — #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
force — 2013-04-25T16:06:50-04:00 — #5
I use this: http://css3pie.com/
The filter property tends to be a pain to work with.
patrick0001 — 2013-04-26T04:58:39-04:00 — #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