Text-shadow in IE with jQuery

Front-end developer, user experience designer & Jedi.

Javascript, 27 October 2008, 31 comments

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.

31 comments

Text-shadow in IE with jQuery 27 October 2008, 5:27

[...] Go to the author’s original blog: Text-shadow in IE with jQuery [...]
Testo e ombre in Internet Explorer con jQuery : cssblog.it 6 November 2008, 16:01

[...] kilianvalkhof.com Salva e condividi questo articolo: Queste icone linkano i siti di social bookmarking sui quali i [...]
5 CSS3 Techniques For Major Browsers using the Power of jQuery | Noupe 24 February 2009, 1:19

[...] How To » Text-shadow in Internet Explorer [...]
5 CSS3 Techniques For Major Browsers using the Power of jQuery « Open USA & Worldwide usability design blog 24 February 2009, 17:46

[...] How To » Text-shadow in Internet Explorer [...]
MyBlog - 5 CSS3 Techniques For Major Browsers using the Power of jQuery 24 February 2009, 22:37

[...] How To » Text-shadow in Internet Explorer [...]
Реализация 5 свойств CSS3 для большинства браузеров, используя функционал jQuery | Вебмастеру посвящается... 27 February 2009, 18:02

[...] Text-shadow in Internet Explorer [...]
Spartan-Code» Blog Archive » Técnicas CSS3 que podemos conseguir con jQuery 7 March 2009, 21:12

[...] CSS3 esto será cosa del pasado… pero por el momento debemos resignarno y usar DropShadow o Text-Shadow para IE para [...]
5 CSS3 Techniques For Major Browsers using the Power of jQuery | Neuro Software Programming Blog 25 March 2009, 17:52

[...] How To » Text-shadow in Internet Explorer [...]
five CSS3 Techniques For Major Browsers using the Power of jQuery | designersmantra.com 4 April 2009, 20:20

[...] How To » Text-shadow in Internet Explorer [...]
» Mixing CSS3 and jQuery… How to CSS3 Effects via jQuery WebAir Blog 9 July 2009, 8:50

[...] How To Text-shadow in Internet Explorer using jQuery [...]
Power of CSS3 and jQuery, How to CSS3 Effects via jQuery | guidesigner.net 10 July 2009, 8:01

[...] How To Text-shadow in Internet Explorer using jQuery [...]
用jQuery实现各种CSS3效果 | JoyJS博客社区-互联网信息技术交流平台 12 July 2009, 3:34

[...] How To Text-shadow in Internet Explorer using jQuery [...]
Mixing CSS3 and jQuery… How to CSS3 Effects via jQuery | Pdf Search colection 19 July 2009, 19:45

[...] How To Text-shadow in Internet Explorer using jQuery [...]
How To Add Text-shadow in Internet Explorer using jQuery | jQuery Wisdom 18 September 2009, 20:19

[...] Internet Explorer 8, since I also added the new Internet Explorer 8 version of filter, -ms-filter. Web Site Download AKPC_IDS += "197,";Popularity: unranked [?] Share and [...]
5 CSS3 Techniques For Major Browsers using the Power of jQuery | Downrex 22 September 2009, 14:32

[...] How To » Text-shadow in Internet Explorer [...]
Randall Flagg 15 October 2009, 18:38

This is actually great! But I won’t work in IE8 at all. In IE7 worked out fine, but in IE6 works.. but not that good. The example you set up here works, but bad :S

Anyhow, nice work here! :D
给标题加上阴影效果 | IT北瓜 20 October 2009, 6:28

[...] 由于IE不支持text-shadow属性，所以这里顺便介绍一款可以在IE下实现阴影效果的jQuery插件Text-shadow in IE with jQuery，但插件的作者也提到了该插件还有一些bug。 [...]
15 Ways to Improve CSS Techniques Using jQuery 20 October 2009, 13:38

[...] 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 [...]
5 طرق لتحسين أداء CSS بواسطة jQuery - جزء 1 | ألوانك 24 October 2009, 21:31

[...] القيام بعمل ظل النصوص في Internet Explorer بسهولة باستخدام إضافة jQuery لظل النصوص بواسطة Kilian Valkhof [...]
Roman 10 November 2009, 3:21

The demo does NOT work in IE 8.
20+ Easy to Use jQuery Text Effects and Animations : Speckyboy Design Magazine 16 November 2009, 18:05

[...] Text-shadow in IE with jQuery [...]
20 Einfache JQuery Text Effekte 21 November 2009, 16:20

[...] Text-shadow in IE with jQuery [...]
Sam 23 November 2009, 21:37

Seems it’s the white ‘wrap’ background that’s messing with IE8. Remove that and it works, although I’m seeing the shadow a slightly different size than the text, so by the end of the paragraph it’s completely off. But I’m not testing on a native IE8 so maybe someone else can check that?
Sam 23 November 2009, 21:39

Just to add to the above, seems that if you use Arial it works fine…
Text-shadow in IE with jQuery « Ajax Freak 13 December 2009, 11:23

[...] Demo & Download VN:F [1.7.7_1013]please wait…Rating: 0.0/10 (0 votes cast)VN:F [1.7.7_1013]Rating: 0 (from 0 votes)Share it Tags: IE, Jquery, text This entry was posted on December 13, 2009 at 2:23 am, and is filed under Effects, Jquery. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. [...]
sourav ray 15 December 2009, 6:11

hi kilian,
It is not working for me on IE8 (Windows XP with service pack-3). Demo is also not working!
Mark Muller 16 December 2009, 13:38

Kilian,

Great plugin, but, can you tell me how to get it to work with @font-face text if I remove the call to textshadow – then the text renders the .eot font correctly – turn it on and I get an error on the page. http://7souls.co.uk/test.html is where it can be seen

Any help is gratefully received.
【译文】适用于主流浏览器的5个运用jQuery的css3技术 « Zhao's Blog 23 December 2009, 13:20

[...] How To » Text-shadow in Internet Explorer [...]
22 CSS/jQuery Solutions Showcase Tutorials, Beautify Your WebSite Now | Designer Sandbox 4 January 2010, 9:03

[...] “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.” Demo | Project Home [...]
Q Ball, The 800lb Gorilla 18 January 2010, 20:57

I am interested in implementing your plugin for IE text shadow conversion, however I am stumped on installing it. I have added the script call in the header, but I am not sure what else to do except address the css code above in my ie.css file. I am an amateur when it comes to javascript impementation. What is the step by step method to install after the header.

What I have done now did not produce any results as of yet.

Thank you for this brilliant script. I hope to be able to translate your efforts from your demo to my site.
10+ Useful jQuery Plugins « Nulls 24 January 2010, 11:45

[...] Valkhof posted an article in which he showed how to create shadows for text with jQuery in Internet [...]

Your response?

If you post code examples, make sure to escape your HTML.

Cross-browser text-shadow CSS & (X)HTML, 27/02, 17

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…

(Almost) Cross browser text-shadow CSS & (X)HTML, Design, 21/01, 16

Update: I have written a jQuery plugin that takes case 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…

gridBuilder.js, background grid generator in canvas Design, Javascript, 28/09, 1

GridBuilder.js is a jQuery plugin that uses canvas to generate a grid background for arbitrary elements. Because it generates the grid via javascript and canvas, it’s much more flexible than using an image background. Canvas …is pretty easy. There are good guides available, not the least the…

Kilian Valkhof

Front-end developer, user experience designer & Jedi.