Kilian Valkhof

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 #

Demo. Works only in Internet Explorer. :)

The Plugin #

The plugin itself offers two functions: textShadow(); and 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:

$(elem).textShadow({
	color:   "#000",
	xoffset: "5px",
	yoffset: "5px",
	radius:  "5px",
	opacity: "50"
});

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.

Limitations #

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-top and 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 em, %, cm, mm, pt, pc and in, but I’d really rather not.

Download #

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.