RSS
 

Creating a nice text shadow in Internet Explorer

20 May

I discovered a few days ago that Internet Explorer 9 didn’t include support for text-shadow. No surprises there, but I needed to put some white text on a greenish blueish background and it didn’t look that great. I stuck a text-shadow on it in Chrome, and it looked pretty good, so I set about looking for some sort of filter-based solution for Internet Explorer. I’m a firm believer of not using JavaScript when I don’t have to, so I limited my searching to CSS only. It didn’t take me long to find something; Zoltan’s CSS Blurred Text-Shadow in IE. His solution involves using :before, attr() and the blur filter. It also relies on using Paul Irish’s Conditional CSS Pattern, or using conditional comments to target IE with different stylesheets. It didn’t take me long to implement this solution because it was very easy.

<h1 data-innertext="Fear my shadow!">Fear my shadow!</h1>
h1 {
    color: #fff;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    text-shadow: #333 2px 2px 3px;
    padding-bottom: 2px; /* stops the "shadow" being chopped in IE */
}
.ie8n9 h1 {
    color: #333;
    zoom: 1;         /* required to give the element layout for filters */
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}
.ie8n9 h1:before {
    color: #fff;
    content: attr(data-innertext);
    position: absolute;
}

This gave me a nice clean shadow in Internet Explorer 8 and 9 that matched Chrome’s text-shadow, differing only really in the same way Firefox 4′s shadows differ from Chrome’s. It’s possible to tweak the pixel radius, the colour and the element position to get an even closer match but please don’t waste too much time worrying that your shadows aren’t pixel-perfect in all browsers. Zoltan originally reported the trick to work with IE 8 and 9, but later discovered some issues that didn’t really apply to me — it looked much the same in IE 8/Vista and IE 9 in IE 8 mode on Win 7.

Zoltan asked at the end of his blog post if anyone could come up with a better solution. It was only after discovering and answering a related question on Stack Overflow (you know, where all my blogging inspiration comes from) that I realized you could just do what :before is doing behind the scenes anyway. So I changed my code to this:

<h1><span>Fear my shadow!</span><span>Fear my shadow!</span></h1>
h1 {
    color: white;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    text-shadow: #333 2px 2px 3px;
    padding-bottom:2px;
}
.shadow { display: none; }
.ielte9 > h1 > span {
    position: absolute;
    color: white;
}
.ielte9 > h1 > span.shadow { 
    display: inline-block;
    zoom: 1;
    color: #333;
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}

So, for a little extra markup and targeting our CSS rules to IE 9 and lower, we get a working solution for IE 7-9. This also doesn’t suffer the same bug that Zoltan mentioned in his post, because that applies to :before. Furthermore, this solution will work in IE 6 if you remove the > direct descendant selectors. IE 6′s filters don’t look as good, though.

Shadow in Chrome

Google Chrome

Shadow in Firefox

Firefox 4

Shadow in IE 9

Internet Explorer 9

Shadow in IE 8

Internet Explorer 8

Shadow in IE 6

Internet Explorer 6

Unfortunately, my Vista/IE 7 machine has a busted HDD so I can’t test it right now, but I expect it would look similar to the IE 8 screenshot. The extra markup shouldn’t be a big deal, because you’re using text-shadow sparingly, right? …Right!? Of course, it’s not practical if you’re applying shadows to large paragraphs of text and it won’t do most things that text-shadow can do without, perhaps, a lot of tweaking, but if you just want to spice up your headings a little it just might do the job for you.

NB: I’m sure people have been using this technique for years, but I wasn’t able to find any posts that didn’t involve using JavaScript or using DropShadow/Glow filters directly on the text, which look absolutely awful.

 

Tags: , , ,

Leave a Reply

 

 
  1. Werner

    June 3rd, 2011 at 5:54 pm

    Hello People,

    a solution with jQuery

    // Text-Shadow
    $("h1:not(.no-text-shadow-ie)", $(‘section’)).each(function(){
    var h1_tx_Shadow = $(this).text();
    $(this).append("<span class=’shadow_h1′>"+h1_tx_Shadow+"</span>");
    });

    /* CSS */

    section h1, section h2, .text-shadow-ie {
    position:relative; z-index:2;
    }
    span.shadow_h1, span.shadow_h2, span.shadow_ele {
    position:absolute; top:0px; left:0px; z-index:-1;
    }
    span.shadow_h1 {
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=’1′,MakeShadow=’true’,ShadowOpacity=’0.60′);
    }

     
  2. √únsal Korkmaz

    June 5th, 2011 at 4:20 pm

    There is an interesting solution for text-shadow @ IE:
    http://asamuzak.jp/html/321#source
    http://asamuzak.jp/html/322

    A live example of this:
    http://kremim.com/

     
    • √únsal Korkmaz

      February 8th, 2013 at 9:54 am

      Since lots of people coming to see example to kremim.com, i need to say i released a new theme based on bootstrap and i removed text-shadow js. So its not an example anymore

       
    • Shme

      March 21st, 2013 at 12:29 pm

      Are you serious?

       
  3. Schrammelhammel

    November 4th, 2011 at 1:13 pm

    Hi there,

    i might be a little late but i just came across your post via google searching for a way to use text-shadows in IE. Your solution works and looke great but i am concerned over the SEO Aspect of putting the same Text twice inside a h1 Tag.

    Do you have any experience about possible Google penaltys?

     
    • Andy

      November 6th, 2011 at 3:07 pm

      Schrammelhammel,

      I actually tried looking into this and was unable to find anything that indicates you could be penalized for repeating a small amount of text like this. There are penalties for duplicate content, but that is always in regards to duplicating the content of another site on a different domain.

      I don’t believe that it could hurt your rankings. Don’t forget that over using text-shadow is generally not a good idea anyway, so the amount of text repeated on your page should be small. For the extremely cautious, you could use Zoltan’s :before hack, which will work on IE 8 and greater, or just use JavaScript to duplicate the content and insert the shadow.

      If anyone does find any information indicating that this method could hurt search engine rankings, then I’d appreciate it if they could post it here in the comments.

       
    • Jonathan

      April 11th, 2012 at 8:24 pm

      Good point. I’ve come to the conclusion that no one should use IE, and those that do won’t notice my little details anyway. I spend too much time worrying about a browser that does care about web developers.

      IE9, welcome to 2004

       
  4. Crooked Glasses ~ a slightly tilted view of the world

    December 12th, 2011 at 1:59 pm

    [...] ImpressiveWebs (how browsers compare in displaying shadows; using filter: glow for IE-only shadows) IE Text Shadows @ WhatTheHeadSaid (CSS-heavy explanation of how to hack in text shadows for [...]

     
    • Travis S

      September 17th, 2012 at 5:58 pm

      Thanks for the post. I’m testing in windows 7 with ie 8. In order to get your solution to work I had to remove the ” > ” characters and add “class=’shadow’” to the second span tag.

       
  5. Evelyn

    April 15th, 2012 at 5:29 am

    I’m trying to do this for #title.
    How to I make this work once I have the css that you describe in my site. What refers to the .ielte9?

    I’m using wordpress with the Catalyst theme.

    Thanks,
    Evelyn

     
  6. Dona

    May 10th, 2012 at 9:58 pm

    Certainly an awful way of doing simple thing. The good news is IE10 is brining all those wonderful features.. See what official blog said about text-shadow:
    http://blogs.msdn.com/b/ie/archive/2011/09/29/css3-text-shadow-in-ie10.aspx

     
  7. Aaron

    April 12th, 2013 at 6:51 am

    I am currently using this on a horizontal navmenu, which currently requires that the list items have a relative position. However, in this code, it is required that the span (children of my list items) be set to absolute position. These are interfering with each other– any suggestions?

     
  8. Zahid

    February 26th, 2014 at 2:57 pm

    Is there any way to change the blur color from gray to white?

     
    • Andy

      February 27th, 2014 at 8:52 am

      Zahid,

      In IE 9 and lower, the shadow colour is actually defined as the foreground colour in the CSS. So, where you have span.shadow, change the color property to your desired colour.