Text-Shadow in IE

Question

I found a Stackoverflow article on creating text shadows in IE: StackQuestion Now I tried all of the 'filter' solutions in there, and in IE9, the text renders horrible(although the shadow shadow shows, the text pixelates heavily...).

Does anyone know of a proper text-shadow technique for IE? Even if it is just for IE9...

Thank You

Answer 1

Check this site out: http://css3pie.com/

It's a plugin that enables you to use CSS3 in IE6-9

Answer 2

You can get text-shadow effects in Internet Explorer, taming IE's crunky filter shadow effects, forcing them to look okay and stop pixelating the text. Use the IE Chroma filter:

• Set a background colour that is close to, but not the same as, your shadow colour - e.g. for black shadows, a dark grey, for white glows, a light grey
• (set the background colour in a stylesheet or style rule inside an IE-only class or conditional comment, to not wreck your design in every other browser!)
• Precede your IE filter CSS rule with a Chroma filter set to the same colour as the background fill
• It looks (almost) quite good!

jsfiddle examples (load in IE8, IE9)

...or if you don't have easy access to IE8/9, here's a screenshot from that fiddle in IE9 IE8 mode. Notice the difference between the horrible, artifact-ridden, pixelated mess that is IE's default filter, against the quite crisp, normal-looking Chroma filter equivalents.

CSS code examples. Note how you've got a Chroma filter then another filter, all on one line, in quotes against one -ms-filter - and how the Chroma colour matches the background colour precisely, and how the Chroma colour compliments (but doesn't match) the main effect colour:

.chroma-glow {
    background-color: #dfdfdf;
    -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Glow(color=ffffff,strength=4)";
}
.chroma-shadow {
    background-color: #dfdfdf;
    -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ffffff)";
}

---

Some requirements (learned the hard way...)

• Elements must be block or inline-block, can't be inline.
• Filters fail to apply to any children that are position: relative; or position: absolute;
  • (they work if applied directly to position: absolute; or `position: relative; elements)
• If you're adding the filters dynamically, e.g. with jQuery like $elem.css('filter','progid...');, it seems like the background colour must be applied directly to the element with the filter for the chroma to work. A couple of tips:
  • Have the effect colour, applied background colour, and chroma colour all identical
  • Since you'll want this background colour only in IE, use feature detection or IE detection.

Answer 3

#element {  
    filter: glow(color=black,strength=5);  
}