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.
72 comments
[...] Go to the author’s original blog: Text-shadow in IE with jQuery [...]
[...] kilianvalkhof.com Salva e condividi questo articolo: Queste icone linkano i siti di social bookmarking sui quali i [...]
[...] How To » Text-shadow in Internet Explorer [...]
[...] How To » Text-shadow in Internet Explorer [...]
[...] How To » Text-shadow in Internet Explorer [...]
[...] Text-shadow in Internet Explorer [...]
[...] CSS3 esto será cosa del pasado… pero por el momento debemos resignarno y usar DropShadow o Text-Shadow para IE para [...]
[...] How To » Text-shadow in Internet Explorer [...]
[...] How To » Text-shadow in Internet Explorer [...]
[...] How To Text-shadow in Internet Explorer using jQuery [...]
[...] How To Text-shadow in Internet Explorer using jQuery [...]
[...] How To Text-shadow in Internet Explorer using jQuery [...]
[...] How To Text-shadow in Internet Explorer using jQuery [...]
[...] 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 [...]
[...] How To » Text-shadow in Internet Explorer [...]
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
[...] 由于IE不支持text-shadow属性，所以这里顺便介绍一款可以在IE下实现阴影效果的jQuery插件Text-shadow in IE with jQuery，但插件的作者也提到了该插件还有一些bug。 [...]
[...] 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 [...]
[...] القيام بعمل ظل النصوص في Internet Explorer بسهولة باستخدام إضافة jQuery لظل النصوص بواسطة Kilian Valkhof [...]
The demo does NOT work in IE 8.
[...] Text-shadow in IE with jQuery [...]
[...] Text-shadow in IE with jQuery [...]
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?
Just to add to the above, seems that if you use Arial it works fine…
[...] 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. [...]
hi kilian,
It is not working for me on IE8 (Windows XP with service pack-3). Demo is also not working!
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.
[...] How To » Text-shadow in Internet Explorer [...]
[...] “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 [...]
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.
[...] Valkhof posted an article in which he showed how to create shadows for text with jQuery in Internet [...]
Demo url http://kilianvalkhof.com/uploads/jquerytextshadow/
text shadow not work in IE8
Sadly, bugged to hell in IE7.
This still doesn’t work in IE8. Not sure about other versions…
I also had problem to display the text shadow on IE8, it appears well on IE7. The problem was in the CSS – the background hid the text shadow – I changed the z-index, so the element with the background was under the link, to which was applied the text-shadow script. Thanks for the great script! It’s really easy to set!
Wonderful. Thanks!
Ogi is right. In order to get it to work in IE8, you need to add a z-index value to the element. It doesn’t seem to matter what the value is. For example, “z-index: 1″ seems to fix it in all circumstances. Which is strange, because it works even without adding a position setting. Normally, z-index only works when used on positioned elements. I guess the plugin is giving the element relative positioning?
[...] Text shadow in IE with jquery [...]
Yeah, unfortunately this doesn’t work with IE8 :(
6 and 7 work, although 6 does start to throw a (rendering) fit if you put it on lots of text (like the paragraph in your example). Small amounts like the heading seem fine though :)
Look forward to an update to this fixing IE8!
[...] CSS3 esto será cosa del pasado… pero por el momento debemos resignarno y usar DropShadow o Text-Shadow para IE para [...]
[...] [...]
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
[...] [...]
[...] Text ShadowというjQueryプラグインを使います。 [...]
[...] 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 [...]
[...] 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 [...]
[...] mediante la propiedad text-shadow.Para generar este efecto en Internet Explorer podemos recurrir a un plugin de jQuery desarrollado por Kilian Valkhof.Uso del plugin:En primer lugar debemos ajustar en nuestro fichero [...]
[...] в свойстве filter . C этой проблемой может помочь JavaScript — JQuery-плагин написанный Kilian [...]
It’t not working with IE.8, I hope this plugin will updated soon.
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
[...] [...]
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
[...] http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/ (jquery ile gölge verme) [...]
[...] 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 [...]
[...] 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 [...]
[...] Text-Shadow In IE With JQueryOne 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. Works in Internet Explorer 5.5+. [...]
[...] [...]
[...] 糟糕的是，IE还不支持这种效果，要在IE下实现文字阴影效果，可以利用一个Jquery插件。下载完插件之后，利用下面的代码即可在IE下实现文字阴影。 1 2 3 4 5 // include jQuery library in your page // include link to plugin in your page $(document).ready(function(){ $(".text-shadow").textShadow(); }); [...]
[...] 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 [...]
It doesn’t work for me in IE8
Your response?
If you post code examples, make sure to escape your HTML.