Transparent text with text-shadow in IE

Question

When using color: rgba(255,255,255,0.0); in conjunction with text-shadow: 0px 0px 2px rgba(255,255,255,1);, Internet Explorer seems to inherit the

Answer 1

You can trick IE by moving the real text out of the viewable area and adjust the text-shadow to compensate for the real text offset.

Here's a demo - http://jsfiddle.net/495dZ/36/

The basic principal:

.shadow { 
    display:inline-block;
    color:#FFF; // the color will control the text-shadow color
    text-indent:-999px; // offsetting the "real" text
    text-shadow:999px 1px 3px; // fixing the offset of the text shadow
}

This will work in certain situations and will require a unique setup for each of those situations. (most likely to set the parent's overflow to hidden so the offset text won't be seen. also sometimes you would need to offset it to different directions, depending on the context)