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 transparency of the text-shadow from the text itself, causing the shadow not to appear at all.

JSFiddle example (view in IE): http://jsfiddle.net/495dZ/1/

Is there a clever pseudo-class technique to work around this? Or maybe something using jQuery to achieve a similar effect?

Answer 1

I am not 100% sure if this is what you are asking, but IE9 and below doesn't support text-shadow property. In IE10 and IE11 your fiddle looked the same as in latest Chrome.

I would suggest using conditionals to target IE9 / IE8 / IE7 and serve plain text.

Answer 2

A extra text-shadow definition for IE 10+ do the trick:

.transparent-text-with-shadow {

    color:         transparent;                            // or rgba(0,0,0,0);
    text-shadow:   rgba(0,0,0,1) 0px 0px 10px;             // for Chrome etc.
    text-shadow:   rgba(0,0,0,1) 0px 0px 10px 0.01em;      // for IE 10+
}

The second text-shadow definition overwrites the first in IE 10+ only, because IE 10+ supports a fourth length value for the shadow's "spread" - see http://caniuse.com/#search=text-shadow

In other browsers, like Chrome, the second text-shadow definition overwrite fails, because they do not support a fourth length value for the shadow, and so they will use the first text-shadow definition.

(Make sure the fourth "spread" value is very small - so you can't see any rendering differences.)

Answer 3

You could just hide the text off the edge of the window/screen, consider adding a fallback for older versions of IE as well.

Working Example

.black-box {
    background: url(http://i44.tinypic.com/2rzwis3.jpg) no-repeat;
    padding: 20px;
}
span.shadow {
    font: 20px Arial;
    position: absolute;
    left:-100px;
    top:-100px;
    color: rgba(0, 0, 0, 1);
    text-shadow: 120px 120px 2px rgba(255, 255, 255, 1);
}

<!--[if lte IE 9]>
    <style>
    span.shadow {
        position: static;
        display:inline-block;
        font: 20px Arial;
        color: rgba(255, 255, 255, 1);
        filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=2.25);
        }
    </style>
<![endif]-->

<div class="black-box"> 
    <span class="shadow">This is some text.</span>
</div>

Answer 4

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)