(Almost) Cross browser text-shadow
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 littl…
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.
Related articles
Cross-browser text-shadow
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 re…
The state of selectable text-replacement
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 Typef…
Hi,
It worked .. thanks alot you have saved my time.
[…] Demo and Download 2、Text-shadow in IE with jQuery 在IE下轻松实现文字投影效果 Demo and Download 3、jQuery Grab Bag – Text Effects […]
Cool!!! Спасибо!!! Thanks!!!
http://ironscorpio.my1.ru/ Мир ВебМастера
http://embroideryland.ru/ Embroidery
I know it’s an older method now, but worked very well on a project I’ve just completed – thanks
Very informative post. Thanks…
very curious, your demo works, but after implementing within my new project either ie7 nor ie8 will show a text-shadow!?!?!? hmm any hints?
This is a great piece of information. Thank you for sharing it with us.
[…] filters. To deal with this problem, a Dutch front-end developer named Kilian Valkhof has written a jQuery plugin that implements text shadows in Internet […]
[…] problem, a Dutch front-end developer named Kilian Valkhof (http://kilianvalkhof.com/) has written a jQuery plugin (http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/) that implements text shadows in Internet […]
Thanks for sharing this! I still don’t understand why IE can’t get with the program and upgrade their browser. Anytime you create anything for the wbe there must always be a “fix” for IE lol
your plugin is greet
but is not work !?
Was excited when I stumbled upon this article. But then I found that it doesn’t work in any versions of IE that I’ve tested (using released versions on different virtual machines).
-10 Jedi points.
[…] en los Texto, algo tan simple como esto, IE no lo soporta para ello Kilian Valkhof desarrolló un plugin en jQuery para que pueda ser […]
[…] 22. Text-shadow in IE […]
[…] 22. Text-shadow in IE […]
[…] nice text-effects without using any images. But IE does not support this feature till date. Text-shadow in IE adds this support to Internet Explorer using […]
[…] Text Shadow in IE with jQuery […]
[…] Text Shadow in IE with jQuery […]
Demo does not work in IE9 or IE8 only in IE7.
[…] Text Shadow in IE with jQuery […]
[…] Text Shadow in IE with jQuery […]
Amazing post. Thanks for sharing such a nice informative post.
[…] 17. Text-shadow in IE with jQuery […]
I’ve got this plug-in working and have figured out some of its nuances; however, I’m struggling to get it to work with a slider. Specifically, JQuery Cycle. In this case in Drupal as Views Slideshow.
The effect only displays on the first slide. I’ve tested a few other JQuery functions to make sure this isn’t a JQuery issue and it’s not. I’ve also tried manually declaring the options with no luck either.
Any suggestions for me?
Your plug-in seems to be the most viable comparative to what else is out there. The elements that I CAN get it to work on look great!
DW
Awesome jQuery plugin! It creates a great typography effects when combined with Google Fonts API. It fits perfectly for my current project.
Thank you for sharing.
[…] would have thought they’d be using a script like this one or this one, or even the Microsoft-only shadow filter. While those are options to consider, MLB.com […]
Works fine on all my browsers. So helpful post that I never found it on the net before.
[…] nice text-effects without using any images. But IE does not support this feature till date. Text-shadow in IE adds this support to Internet Explorer using […]
This doesn’t work in IE9 which makes it useless. Neal Grosskopf tecnique http://www.nealgrosskopf.com/tech/thread.php?pid=61 does work.
Here is an example that works with jQuery 1.8.1!
Your shadow can also be set as:
$(document).ready(function() {
$(‘h1’).css(‘text-shadow’, ‘1px 1px #fff’).textShadow();
});
In your script, you need to replace:
var shadowarray = obj.css(“text-shadow”).split(” “);
var sradi = parseInt(shadowarray[3], 10);
var text = “” + obj.html() + “”;
var padding = {
left:parseInt(obj.css(“padding-left”), 10),
top:parseInt(obj.css(“padding-top”), 10)
};
var defaults = {
color: shadowarray[0],
radius: sradi,
xoffset: parseInt(shadowarray[1], 10)-1+(padding.left-sradi) + “px”,
yoffset: parseInt(shadowarray[2], 10)-1+(padding.top-sradi) + “px”,
opacity: 50
};
with:
var defSettings = obj.css(‘text-shadow’).split(‘ ‘);
var text = “{ ” + obj.html() + ” }”;
var defaults = {
color: defSettings[2],
xoffset: defSettings[0],
yoffset: defSettings[1],
radius: “0px”,
opacity: “100”
};
[…] Text-shadow in IE with jQuery […]
[…] 21. Text-shadow in IE with jQuery […]
Can be applied to png image with transparency background??