Text-shadow in IE with jQuery
With the soon-released FireFox 3.1, three of the four major browsers support text-shadow. That leaves just Internet Explorer with the lack of text-shadow. I have already taken care of that problem, but decided to wrap it up in a nice automated jQuery plugin.
How it works
One handy little thing of Internet Explorer is that it also gives you access to CSS declarations it does not understand, so we can simply request the text-shadow value of a given element and process that. For a more in-depth explanation of how the technique itself works, please read the original article. It should work in Internet Explorer 5.5 to Internet Explorer 8, since I also added the new Internet Explorer 8 version of filter, -ms-filter.
Demo. Works only in Internet Explorer. :)
The plugin itself offers two functions:
removeTextShadow();, which do what you expect them to do.
textShadow(); Allows you to optionally overwrite the text-shadow declaration from your CSS to tweak the look of the text-shadow in Internet Explorer, if needed. The available options look like this:
You’ll notice that all the regular options of text-shadow are there but that I’ve also added opacity, which helps tweak the intensity of the text-shadow. It’s translates to Internet Explorer alpha-opacity, so it’s range is 0 to 100. 50 works best in most cases and is also the default.
There is really only one major limitation, it just doesn’t look as good as native text-shadow support in the other browsers. It works pretty well for average-sized text-shadows, but it falls apart on smaller or larger sizes. Tweaking it may help, but YMMV.
Another small limitation is that the
padding-left of the elements that get a shadow need to be in pixels, otherwise it won’t work. I could theoretically write something that takes care of
in, but I’d really rather not.
Here you go: jquery.textshadow.js. Tested with jQuery 1.2+ but will probably work with older versions as well.
Update (26 Feb 2010)
I just released version 1.1, which fixes the problems with IE8. Have fun! In some cases you have to add a z-index to the element that you are adding a shadow to.
With my discovery of almost cross browser text-shadow something kept nagging me: It didn’t work in Firefox. A couple of days ago I went back to my experiments and succeeded in a reasonable looking text-shadow effect in Firefox. What’s more, In some configurations I can…
Update: I have written a jQuery plugin that takes care of text-shadow in Internet Explorer, you can read the article here: Text-shadow in IE with jQuery
Text-shadow is a neat little CSS3 (actually, CSS2) property that allows you to display a shadow behind your text. The…
In “Cufón vs. Typeface.js, which one is better?“, I declared that the first one to support selectable text wins. We’re a couple of months further now and both Typeselect and Typeface.js 0.13 appeared, adding support for selectable text. What is the state of selectable text-replacement?