<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:
2px 2px 0 #E51919
3px 3px 3px #B24C4C
0px 1px 0px white
0px 0px 4px white, 0px -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200
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;
0 0 3px #fff
0 0 20px yellow, 0 0 60px yellow
-1px -1px white, 1px 1px #333333
1px 1px white, -1px -1px #444
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
These examples were inspired by these excellent examples on the web:
- Text-shadow, Photoshop like effects using CSS by CSS3.info (cssSandpaper version)
- Using CSS Text-Shadow to Create Cool Text Effects from Chris Spooner (cssSandpaper version)
- 8 css3 text-shadow effects by Fatma Alemadi (cssSandpaper version)
How Can cssSandpaper Give Me
- Download the code from github.
- Include the following in the
headof the document you have
- It should now work in IE. With the HTML5 Doctype, you can remove the
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.
- 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?)
- 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.
- Sometimes IE cuts off the shadows when the
line-heightis too small:
- In IE7-8, elements above text-shadowed text that have a
line-heightproperty measured in
emunits 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:
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
emunits to pixels. If you have a lot
- Sometimes, in order for the text-shadows to render correctly when using ClearType, you may have to use the
-sand-chroma-overrideCSS property on the HTML you applied the
text-shadowon. 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:
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-overridevalue to see what looks best in which situation.
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:
- 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.
- 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).
- 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.
- Further CSS3 Support: I am looking into polyfills at the moment, like
border-image. Any other ideas for plugins will be most welcome.