CSS-3 Text-Shadow

CSS3 Text Shadow is not supported Internet Explorer, but it is however possible to create an equivialant effect with the IE propertiary CSS Filter Blur and served this with the jQuery plugin jquery.textshadow.js.

How to use

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

h1 { 
  text-shadow: 2px 2px 2px #999; 
}

For Internet Explorer 6, 7 and 8 apply textShadow() with jQuery after the DOM is loaded

$(document).ready(function(){
  $("h1").textShadow();
})

Or you can call textShadow() with option parameters to override the default CSS values.

var option = {
  x:      1, 
  y:      2, 
  radius: 3,
  color:  "#ccff00"
}

$("h1").textShadow( option );

The text-shadow can be removed with textShadowRemove()

CSS-Syntax

Write the css syntax in many ways.

Examples

Warning: if text- and background-color are the same, the text will not be viewable in browsers that do not support text-shadow.

Issues

• CSS-length values must be in pixels
• no support for multiple shadows

Changelog

Version 0.2 - November 12, 2008

• Default values are taken from CSS-style
• Write text-shadow in diffierent ways:
  x y | x y color | color x y | x y blur | blur x y | x y blur color | color x y blur
• Use standardized jQuery option parameter for CSS-values override
• Remove shadow with textShadowRemove()
• IE8 beta2 support
• Support for text-align, float and padding

Version 0.1 - October 18, 2008

• First public release