Internet Explorer text-shadow with jQuery

→ Are you a new visitor? Please visit the page guidance for new visitors ←

Internet Explorer text-shadow with jQuery.

Hi everyone. Today I will present you a solution to a common web development headache. We will learn how to generate text shadows with jquery and get rid of all the ugly Internet Explorer related css declarations for the same purpose.

The old Internet Explorer problem.

As we all know, old versions of Internet Explorer does not have support for box-shadow and neither for text-shadow declarations. This is the reason we will end up writting ugly code as following:

Problem solved. How ?

A very nice and well written jquery text shadow plugin to the rescue. Download it from here: jquery text shadow plugin.

Usage

Create a text-shadow in CSS for Chrome, Firefox 3.1+, Safari 1.1+, Opera 9.5+, Konqueror 3.4+ and iCab 3.0.3+ like this:

For older version of IE you can use this as a fallback:

You can pass a parameter called “option”  like in the above example to specify the x, y, radius and also the color of the shadow.

The text-shadow can be removed with textShadowRemove() function.

Result

Text shadow in Internet explorer

Text shadow in Internet explorer

The only issues that remain are:

  • CSS-length values must be in pixels
  • no support for multiple shadows
Request an article ←