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.
133 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
Does not seem to be working for me in IE8… Including the demo page.
[...] un proces simplu, chiar și cu folosirea unui filtru. Pentru a rezolva aceastră problemă există un plugin jQuery scris de un web designer Kilian Valkhof În primul rînd trebuie în CSS să setați proprietatea [...]
[...] that text shadows must be present in IE as well, then you can use this nifty little plugin from Kilian Valkhof.To enable text-shadows in IE, your code looks like this:1 2 3 4 5 6 7 [...]
[...] in IE, it is not possible to use text-shadow. For that, you can use a jQuery plugin written by Kilian Valkhof. See, how to use [...]
[...] filters. To deal with this problem, a Dutch front-end developer named Kilian Valkhof11 has written a jQuery plugin12 that implements text shadows in Internet [...]
Try to write text-shadow property with color at the beginning.
text-shadow: #HHH 1px 1px 1px
[...] скачать можно здесь, там же описан синтаксис использования и [...]
[...] How To Text-shadow in Internet Explorer using jQuery [...]
[...] 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 [...]
BRILLIANT!
The result is stunning! (at least for my website!)
The ulgy shadows in IE are not only for text, but for anything! This could apply to divs, images… Great work!
[...] 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 [...]
Really failing something awful with IE9
Terrible on IE9!!!
[...] for you. (Click on the the plugins ‘Custom’ tab for the generator).Demo and DownloadText-shadow in IE with jQueryMost of major browsers support text-shadow, yes, you guessed it, IE doesn’t. This handy jQuery [...]
Demo page not working in IE8. What gives?
[...] 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 [...]
Demo page not working in IE8. (In IE7 works.)
jqueryjs v1.5.1 + jquery.textshadow.js v1.1
Line 17 Error – css( ) Null or no-object
I hope this plugin will updated soon.
[...] 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 [...]
This is so ugly on IE9 =/
Hi
I made a JavaScript library to apply text-shadow effects which works in MSIE7-9.
Summary: http://asamuzak.jp/html/322
Demo: http://asamuzak.jp/test/textshadow_test_ie_en
Source: http://asamuzak.jp/html/321#source
Please try it and give me your reviews.
Regards
Doesn’t work for IE8.
other IEs are ok though.
Nice post anyway. I bookmarked it.
Thanks.
Ramin
nice tnx for sharing
If “Line 17 Error – css( ) Null or no-object” appeared – you need to cut off these lines from plugin:
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
};
and replace them with:
var text = “” + obj.html() + “”;
var defaults;
Then initialize object with your own options, because of problems with new JQuery version.
$(elem).textShadow({
color: “#000″,
xoffset: “5px”,
yoffset: “5px”,
radius: “5px”,
opacity: “50″
});
SteelRat’s solution almost works.
I changed this line:
var text = “” + obj.html() + “”;
to:
var text = “” + obj.html() + “”;
And I created separate radius variables for the glow and blur filter as I found the equations provided weren’t sufficient for my needs. So my filtertext var looks like:
var filtertext = “progid:DXImageTransform.Microsoft.Glow(Color=”+options.color+”,Strength=”+options.glowradius+”) progid:DXImageTransform.Microsoft.Blur(pixelradius=”+options.blurradius+”, enabled=’true’) progid:DXImageTransform.Microsoft.Alpha(opacity=”+options.opacity+”)”;
Apparently the comment system ate some of my code, inside the quotes should be:
and
no spaces.
[...] How To Text-shadow in Internet Explorer using jQuery [...]
[...] 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 [...]
I appreciate, result in I found exactly what I used to be having a look for. You have ended my 4 day lengthy hunt! God Bless you man. Have a great day. Bye
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??