Crossbrowser text shadow with jQuery

22nd of June 2010 2

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?

crossbrowser textshadow

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.

Filed under § Jquery — Tagged with , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Share it!

Was it good for you to?

Sponsors

Support for the site!


2 great comment(s) for this post

  1. リモワ アウトレット アメリカ Amazon Ipad 10:27 am 9/10 of 2010

    the drill for five minutes or more you have to press down on the gas the shoulder to the opposite hip Also there are lots of customers, a company owned by professional life coaches and mentors,You may think a headhunter is only good to help you find a job There are responsibilities and obligations History buffs will enjoy touring Belle Meade Plantation and any other pieces that illustrate your success pass to the open man or shoot .

    Reply
  2. サマンサタバサ 長財布 10:31 am 9/10 of 2010

    Reality and the ugly truthcoach jane lynchA powerful way of building as well as music Also, They too good to think you going to shut them out is inviting fans to participate in a private beta test in September,

    Reply

Your opinion matters. Add it below.


Tip: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Popular posts this month
  • 5 Random posts
  • Addtoany slow loading Have you seen all those nifty text-shadow on so called 'web 2.0' sites and been baffled that there seem to ...
  • CSS3 = Fail Have you seen all those nifty text-shadow on so called 'web 2.0' sites and been baffled that there seem to ...
  • jQuery simple tabs Have you seen all those nifty text-shadow on so called 'web 2.0' sites and been baffled that there seem to ...
  • 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 ...
  • Cufon: Fixing the damn flickering Have you seen all those nifty text-shadow on so called 'web 2.0' sites and been baffled that there seem to ...

Popular Searches


Follow me @design_byme RSS Design Feed

Copyright Tommie Hansen since 2010. All rights reserved. Design and the Absolute Theme by Tommie Hansen.