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.
Hi, I'm Kilian. I make Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Try it out!
Related articles
CSS & HTML Design , 4 January 2017If you look above this text, you can see that the header of this blog has a sloped edge. It’s one of my favorite things about this new design. The technique I used has a consistent angle regardless of screen size, can show background images and only needs one HTML element and no pseudo elements.…
CSS & HTML Web , 19 October 2020We’re on the verge of a whole lot of new CSS media queries becoming available. But if you’re a developer that wants to get a head start and try them out, you’re out of luck. Browsers are prototyping them one by one before making them available and we as developers have to wait. Prefers-reduced-data is an…
CSS & HTML , 3 July 2016 $ npm install postcss-dutch-stylesheets …