Equivalent to Text-Shadow in Ie

Equivalent to text-shadow in IE

Google Mojo: An Option to Mimic CSS3 Text Shadow in Internet Explorer.

filter: glow(color=black,strength=5); 

The site also lists some other workarounds with JavaScript.

drop shadow style for IE11

I used a workaround as there is no real solution from Microsoft.

If you want to add a shadow to a basic rectangular block element, use box-shadow.
However, you probably have a more complex element - a triangle for example.

In that case you could fake the effect by using a absolute pseudo or child element. Depending on the style you need, use a transformed box-shadow, border or duplicate the content from the main element and scale it underneath, blur it using SVG...

div {
    position: relative;
}

div:before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    box-shadow: 1px 1px 1px black;
    transform: rotate(45deg);
}    

SVG Text with Shadow in Internet Explorer

You can replace a single CSS text-shadow with an equivalent SVG filter of the form...

<filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
    <feFlood flood-color="[color]"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

Just fill in the radius, offset-x, offset-y, and color values.

Your CSS example combined four offset non-blur shadows. An equivalent SVG filter might look something like...

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version = "1.1" width= "100" height= "100">
    <defs>
        <filter id="dropShadow">
            <feFlood flood-color="white" result="flood"/>
            <feOffset dx="-1" dy="0" in="SourceAlpha" result="offset1"/>
            <feComposite operator="in" in="flood" in2="offset1" result="shadow1"/>
            <feOffset dx="0" dy="1" in="SourceAlpha" result="offset2"/>
            <feComposite operator="in" in="flood" in2="offset2" result="shadow2"/>
            <feOffset dx="1" dy="0" in="SourceAlpha" result="offset3"/>
            <feComposite operator="in" in="flood" in2="offset3" result="shadow3"/>
            <feOffset dx="0" dy="-1" in="SourceAlpha" result="offset4"/>
            <feComposite operator="in" in="flood" in2="offset4" result="shadow4"/>
            <feMerge>
                <feMergeNode in="shadow1"/>
                <feMergeNode in="shadow2"/>
                <feMergeNode in="shadow3"/>
                <feMergeNode in="shadow4"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <g>
        <rect x="0" y="0" width="100" height="100" fill="gray"/>
        <circle cx="50" cy="50" r="5"/>
        <text x="50" y="40" filter="url(#dropShadow)">Text</text>
    </g>
</svg>

---

Related Topics