Crossbrowser text shadow with jQuery

22nd of June 2010 0

Crossbrowser text shadow with jQuery

Have you seen all those nifty text-shadow on so called 'web 2.0' sites and been baffled that there seem to be no simple solution available in order to get it cross browser and working in IE6-IE8?

I've searched high and low for a simple solution but in the end decided to create my own via jQuery since there wasn't any good and light weight solutions at all as usual.

The solution is to duplicate text and inject em (or span tags if you'd like) into the tags and classes of your choosing and then to, via css, position it.

So let's begin with the jQuery:

$(function () {
var textshadow = $("p.textshadow"); //replace with your own!
textshadow.append("<em></em> ");
textshadow.each(function() { var dupeText = $(this).text(); $(this).find("em").text(dupeText); });
}); //end domready

What this jQuery code does is that it simply looks for the selectors you choose (var textshadow), injects em-tags and later on copies the original text and appends it within an em-tag. You could also use a span-tag if you're worried about semantics, just replace the stuff within the script and later on within the CSS.

And say hello to the CSS:

p.textshadow {
position:relative;
zoom:1; /* Enable layout in IE */
color:#fff; /* Color of shadow? */
z-index:9;
}

p.textshadow em {
position:absolute;
top:-1px;
left:-1px;
z-index:10;
color:#444; /* Color of the text? */
font-style:normal; /* Only if you want to remove default styling of the EM-tag */
}

Ok -- So what does all this do? First we say that p.textshadow should be positioned relative so that we later on can adjust the em-tag absolutely within the P-tag. Next we continue to use zoom:1 in order to give the P-tag layout in our beloved friend Internet Explorer and fix some box model issues. We then apply the color we want for the shadow, in this case #fff (white). Then we set a default z-index for the main P-tag; z-index:10.

In order for all this to work smoothly we need to re-define our base color for the P-tag as well and we continue doing that within the EM-tag, color #444 in the example.

Important to note here is the switching. You need to define your main color for the selected tag within the new CSS. You'll also, of course, need to load jQuery before anything of this work. If you are still uncertain of anything just check out the example.

Note also that you should absolutely not use this for body text, just for a couple of elements like certain headers or similar. It's certainly also advisable to use this with conditional comments for Internet Explorer and for the rest use CSS3's text-shadow property.

View Example

If you know a way to further optimize this code feel free to share it! I am by no means an expert with jQuery or won't ever be either probably.