Full CSS3 Text-Shadows — Even In IE

June 29th, 2011 by zoltan · 30 Comments
CSS3 &
HTML5

In the last few months, I have written two articles where I discussed a few strategies to do CSS3-style transforms in IE (CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript? and CSS Blurred Text-Shadow in IE — Part I). While demonstrating the possibilities to creating a varied range of text-shadows in IE, there wasn’t any silver bullet that produced what I considered one of the Holy Grails of CSS polyfills: a method that could take an existing page and render multiple CSS3 text-shadows in IE with few, if any, changes to the CSS code. To that end, at the end of my last article, I dropped the gauntlet at the end of my last article and challenged the web development community to help come up with a better solution. I got a few takers, but one stood out from the rest. Kazumasa Hasegawa submitted his script and blog post (in Japanese and then in English) about his script that could do exactly what I asked: full CSS3-style text-shadowing in IE. It can do multiple blurred and unblurred shadows per block of text. The only caveat is that one would have to set the CSS selectors inside a JavaScript file. However, the code was extremely well written, and it was very easy for me to refactor it to become a plug-in for my CSS3 polyfill library, cssSandpaper. Now, all a developer has to do now is include a few <script> tags into the <head>, and BAM!!! — instant text-shadow goodness in IE7+.

Yeah Whatever! Show Me Proof!

If you are viewing this page in IE7+, here are the droids you are looking for:

Live CSS/HTML IE9 Firefox Text-Shadow Syntax
Simple
2px 2px 0 #E51919
Blurred
3px 3px 3px #B24C4C
Etched
0px 1px 0px white
Flaming
0px   0px  4px white,    0px  -5px  4px #FFFF33,
2px -10px  6px #FFDD33, -2px -15px 11px #FF8800,
2px -25px 18px #FF2200 
Neon
0 0 1px  #ffffff, 0 0 2px  #ffffff,
0 0 3px  #ffffff, 0 0 4px  #ff00de,
0 0 7px  #ff00de, 0 0 8px  #ff00de,
0 0 10px #ff00de, 0 0 15px #ff00de;
Unfocused
0 0 3px #fff
Glowing
0 0 20px yellow, 0 0 60px yellow
Embossed
-1px -1px white, 1px 1px #333333
Pillow
1px 1px white, -1px -1px #444
Fake 3D
1px 1px rgba(255,128,0,.7), 
2px 2px rgba(255,128,0,.7),  
3px 3px rgba(255,128,0,.7), 
4px 4px rgba(255,128,0,.7),
5px 5px rgba(255,128,0,.7)

(Note that the Blur example does not appear correctly in IE7 and 8, due to lack of support of the transparent color)

These examples were inspired by these excellent examples on the web:

How Can cssSandpaper Give Me text-shadow Goodness?

  1. Download the code from github.
  2. Include the following in the head of the document you have text-shadowing on:
    <script type="text/javascript" src="/path/to/EventHelpers.js">
    </script>
    <script type="text/javascript" src="/path/to/textshadow.js">
    </script>
    <script type="text/javascript" src="/path/to/cssQuery-p.js">
    </script>
    <script type="text/javascript" src="/path/to/cssSandpaper.js">
    </script>
    
  3. It should now work in IE. With the HTML5 Doctype, you can remove the type="text/javascript" attributes.

Download the latest version of cssSandpaper with IE text-shadow support.

Okay, What Are The Caveats

Like any polyfill solution, there are a few things one has to keep in mind when using a solution like this.

  1. As you can see from the above examples, blurred text-shadows in IE look slightly different because of the different algorithm IE’s Blur Visual Filter uses compared to what CSS3 text-shadow uses. This is not so obvious on the second example above, but becomes more obvious the more blurred text-shadows are applied on the same text. For most applications, this is acceptable, but for those of us who like to pixel-bitch (i.e. complain when something is not pixel-perfect), you should be aware of this difference (No, I don’t know where I got that term from. I may have made it up. Anyone else heard of it before?)
  2. Creating a large text-shadow blur (i.e. greater than 70px) on a large piece of text can cause Internet Explorer’s rendering engine to slow down when the text is scrolled into view.
  3. Sometimes IE cuts off the shadows when the line-height is too small:

    The letter 'P' and other letters with descenders may get cut off if the line-height is not set to be larger than the actual font-size.

  4. In IE7-8, elements above text-shadowed text that have a line-height property measured in em units may effect the text-shadow in IE. If there is a problem, the shadow is one pixel off from where it is supposed to be, as shown in this screenshot:

    Examples of a correct looking text-shadow (left) and a text shadow that is a pixel off (right).

    As you can see from the screenshots above, this problem is much more obvious when there is no blur-radius in the text-shadow. I am trying to see if I can work around this problem, but it looks like it has to do rounding errors when IE converts em units to pixels. If you have a lot em units in your document, you may want to consider using my non-JavaScript solution when using a single, non-blurred text-shadows.

  5. Sometimes, in order for the text-shadows to render correctly when using ClearType, you may have to use the -sand-chroma-override CSS property on the HTML you applied the text-shadow on. This property is used by cssSandpaper to fix a problem with ClearType and IE’s Visual Filters, as described in my previous blog post, How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together. Most of the time, this property should be set to be the color that that is behind the text value of the background of the text, but sometimes you will have to look at the outline of the texts and the solid shadows to get an idea as to how it should be set. Let’s take, for example, the “Law and Order” style text at the top of this page. We used the following CSS to produce the text-shadow on the “CSS3” text:
    -sand-chroma-override: #666666;
    text-shadow: 
    	-4px 0px 0px #0f1128,
    	-8px 0px 4px rgb(50, 152, 234),
    	-10px 0px 4px rgba(50, 152, 234, 0.3),
    	-8px -4px 4px rgba(50, 152, 234, 0.6),
    	-8px 4px 4px rgba(50, 152, 234, 0.6);
    

    Why did I end up using #666666? It is a greyscale color that is roughly between the brightness of the off-white text and the blue shadow. If I set it to black instead, the outline of the text’s first dark text-shadow would be blocky, as seen here:

    -sand-chroma-override: #000000 -sand-chroma-override: #666666
    Scale 100%
    Scale 300%

    What you set this value to will depend on the text-shadow recipe you are using and, to paraphrase my Mathematics text-books in college, I leave it up to the reader to play around with the -sand-chroma-override value to see what looks best in which situation.

In Conclusion

This script opens up a lot of great possibilities for styling text in IE. There is still some work to be done to make the script even better with some inevitable bugs that will need to be fixed, and I will continue to work on it to make improvements. If you see areas for improvement, or any bugs that you see with the code, please make a comment on the cssSandpaper issues page on github. If you have something to contribute, I would be most grateful. :-)

Other changes that I am planning for cssSandpaper will include:

  1. Choice of Selector Library: I will be refactoring cssSandpaper to use other selector libraries besides cssQuery, which is currently bundled with it. This will include, but not restricted to, jQuery. This will allow developers to reduce the number of libraries included in their documents and reduce load time.
  2. Modularity: I will make it easy for developers to make their own plugins to support CSS properties not currently supported by cssSandpaper. This module framework will also allow developers to only add support for the CSS properties they want to use (e.g. if a developer doesn’t use any CSS3 transforms, then they don’t have include that code or supporting libraries, like Sylvester.js).
  3. Only Download Code If Needed: I want to make cssSandpaper only download plugins if actually needed. This will probably be done with Alex Sexton’s and Ralph Holzmann’s excellent yepnope.js library. While this library can be used today to speed things up, I want to look into making a little more integrated, if possible.
  4. Further CSS3 Support: I am looking into polyfills at the moment, like border-image. Any other ideas for plugins will be most welcome.

Download cssSandpaper

Download the latest version of cssSandpaper with IE text-shadow support.

Tags: ClearType · CSS · CSS3 · IE Visual Filters · JavaScript · Polyfills · text-shadow

30 responses so far ↓
  • 1 左撇子 // Jun 29, 2011 at 1:48 am

    ooh, nice job!

  • 2 Jason Johnston // Jun 29, 2011 at 11:17 am

    Very nice work Zoltan! I’ve been working on text-shadow in CSS3 PIE recently too, I’ll definitely be looking at your code for ideas. :)

  • 3 zoltan // Jun 29, 2011 at 11:23 am

    @Jason: Please do! Perhaps we have a cross-pollination of ideas here – as mentioned in the post, I just refactored Kazumasa Hasegawa‘s work, including cssSandpaper support tweaking the color shading routine slightly and adding code to make the Visual Filters look less blocky with ClearType on. I hope it can benefit your already excellent work. Thanks for the feedback. :)

  • 6 8 Gram Gorilla // Jul 20, 2011 at 6:20 pm

    Came to this page/site via the Typekit article and must say I’m very happy to find it! Really awesome to see a text-shadow workaround for IE. Will need to try putting it to good use ;) Great stuff! :)

  • 7 Piero Di Carlo Dalla-Bona // Jul 20, 2011 at 11:13 pm

    WOWWWWWW, very good work! =)

    Ps: Style Law & Order #cool #lol

    Thank you very much for your talent.

    Piero.

  • 8 zoltan // Jul 20, 2011 at 11:48 pm

    @Gorilla: Thanks for the kudos!

    Everyone else: For those of you who haven’t read the article he is referring to, it is Tim Brown’s Shading with CSS text-shadows. It does a good job talking about some of the ways text-shadowing has been used in sign painting back in the day, and how these techniques can be simulated in CSS3. Highly recommended. This article, however, has indirectly brought to my attention a bug in the JavaScript code that prevents it from being used correctly with the TypeKit service. I will be posting a fix for this issue in the next few days, and will update my article when this is done.

  • 9 zoltan // Jul 20, 2011 at 11:56 pm

    @Piero: If you like the Law and Order logo, feel free to grab the full screen version I made. It is included in the cssSandpaper package on github.

  • 10 Richard Fink // Jul 21, 2011 at 3:35 pm

    Zoltan,

    Very helpful it would be if you were to enhance Tim’s Page with IE8 support and post it somewhere.
    (I’m not that concerned about going as far back as IE6 or 7 – text can degrade to shadowlessness in those for all I care – but IE8’s going to be around for a long time to come. Just an idea. Make a nice post here.

    BTW – if there is a fix for IE 6/7, too, hey, let’s reach for the brass ring, why not.

    Rich

  • 11 zoltan // Jul 21, 2011 at 5:39 pm

    @Richard: Way ahead of you! As soon as I fix the TypeKit bug, I will definitely be posting a version of that page (pending Tim’s permission, of course). From what I can see, it should work with IE7-9. Will keep you posted.

    Z.

  • 12 Paulo Griiettner // Aug 12, 2011 at 3:25 pm

    Zoltan,

    I just love your tools to make CCS3 properties to work on IE and olders versions. I was looking for a solution to incorporate into my “HTML5/CSS3 Enabled Joomla Template Framework” and I have to say that you did a good Job as well Jason, from CSS3Pie. I’m incorporating both solutions to the framework.

    Thanks and keep up to the good work…

  • 13 David // Sep 22, 2011 at 11:52 am

    Hey there,

    I have been trying out the latest version with support for text shadows, but I think I have found that this solution does not work in conjunction with MooTools :( I am trying to get this working on Joomla 1.7 and if I prevent Mootools loading the text-shadows show and if I don’t I get the error ‘Line: 199
    Error: Unable to get value of the property ‘split’: object is null or undefined’ in cssSandpaper.js. I also have jQuery running but that does not seem to be an issue (its in noConflict mode). Is there anyway to make this run in a kind of ‘noConflict’ mode, like jQuery and/or to use jQuery to get the selectors anyway rather than cssQuery?

    Will be great when I get this working though!

  • 14 Phil Jones // Dec 8, 2011 at 2:06 pm

    Hi Zoltan,

    Very nice library. However there appear to be problems with using cssSandpaper transforms in conjuction with CSS3 style text shadows in IE8. Also when interactive application of a textShadow e.g. onclick=”document.getElementById(‘myBox’).style.textShadow= ‘0 0 20px yellow, 0 0 60px yellow”; does not work in IE8.

    Any thoughts?

  • 15 zoltan // Dec 11, 2011 at 1:24 pm

    @Phil: Regarding the first question, I have noticed that there are some issues with fixing transforms and text-shadows in IE, and am looking into a fix for that. I will also be adding a way to add text-shadows programatically in IE in a similar way as the other CSS3 properties supported by cssSandpaper (text-shadows are the only property which cannot currently do this).

  • 16 Kazz // Dec 22, 2011 at 7:02 am

    Phil, Zoltan :
    Hi, I’ve updated my script, and now you can handle shadows at interactive events.
    See the source.

  • 17 RJO // Mar 9, 2012 at 12:37 pm

    Why are the examples pictures instead of actual text?

    http://www.useragentman.com/blog/wp-content/uploads/2011/06/ie04.png

  • 18 zoltan // Mar 13, 2012 at 10:09 pm

    @RJO: If you look at the first column, it is live text. :-)

  • 19 Jeff L // Mar 26, 2012 at 1:41 am

    This is really awesome. I mocked up a page with this tonight and was quite impressed with the result.

    I had a small issue though, I threw my example in with some simple jquery which uses $.ajax to update a span which I’d applied the text-shadow to. Once the span is updated, the style goes away. Any way to refresh it?

  • 20 zoltan // Mar 29, 2012 at 8:34 pm

    @Jeff: currently, the library doesn’t support updating it dynamically. This will be fixed in a future release.

  • 21 Jim // Apr 19, 2012 at 1:40 pm

    Fantastic!

    Thank you for your diligence in making this available and understandable. You (and those that contributed to this) are a great asset to web-developer community.

    Sincerely grateful,

    Jim

  • 22 Milo // May 23, 2012 at 1:03 am

    People,

    Just wondering how much (IF at at all?) will this slow down loading & rendering of web sites in IE7+ ?

    I have tried http://heygrady.com/blog/2011/03/10/css-text-shadows-in-internet-explorer/ solution, but in my opinion it slows down IE9 so much that I can’t use that on client sites.

    How about this one here? Is it better to use some JS or jQuery based version? Please suggest.

    Cheers.

  • 23 daryl // May 30, 2012 at 12:44 am

    Well I was pretty excited about this. I downloaded you files and looked over the examples. the all worked, but i noticed there wasn’t an example of text shadow in there.
    Anyway text shadow is the only thing I can’t get to work. I looked at the code for this page and saw that you had [[/asamuzak.jp/textshadow.js]] in the head so I copied that too. but no joy!
    what is the secret “User Agent Man”?

    I would appreciate it. Drives me nuts when I can’t get things to look the same accross browsers

  • 24 daryl // May 30, 2012 at 12:39 pm

    Well it is amazing what getting a few hours of sleep will do for ya. Looking at it with new eyes this morning I spotted a comma in the wrong spot ;) et voila! Text Shadow!!

    it’s a beautiful thing!
    {~|~}

  • 25 zoltan // Jun 4, 2012 at 11:53 pm

    @daryl: Glad I can be of help. :-)

  • 26 gordie // Aug 1, 2012 at 12:02 am

    I only commented because i wanted to type inside the neat comment bubbles. thanks for the helpful info!

  • 27 Mufeed Ahmad // Oct 5, 2012 at 6:02 am

    Superb like it…

    thanks a lot
    Mufeed Ahmad

  • 28 D // Oct 5, 2012 at 6:45 pm

    I just tried this in a new site I’m building and the text-shadow on my hover states don’t seem to work. Actually nothing works with :hover. Is this a known bug or just a feature you haven’t added? It’s definitely working, just not on hover states, which is what I need.

    thanks

  • 29 zoltan // Oct 15, 2012 at 8:32 pm

    @D: Pseudo-classes and psuedo-elements such as :hover are not supported by cssSandpaper at this time, but may be included in a subsequent release.

  • 30 Kazz // Feb 5, 2014 at 2:27 am

    Hi, Zoltan

    textShadowForMSIE script would cause a serious problem in accessibility.
    So I canceled publishing it and re-published a new one.
    Please replace the script.
    http://asamuzak.jp/html/446#source
    (New one only supports IE9, won’t support IE8 nor IE7 anymore.)

Give Feedback

Don't be shy! Give feedback and join the discussion.

Please Note: If you are asking for help using the information on this page or if you are reporting a bug with the code featured here, please include a URL that shows the problem you are experiencing along with the browser/version number/operating system combination where the issue manifests itself. Without this information, I may not be able to respond.

An orange star denotes a required field.