CSS-3 Text-Shadow

Download

jquery.textshadow.js

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.

text-shadow: 1px 2px;

text-shadow: 1px 2px red;

text-shadow: fuchsia 1px 2px;

text-shadow: 1px 2px 3px;

text-shadow: 1px 2px 3px green;

text-shadow: blue 1px 2px 3px;

Examples

The quick brown fox jumps over the lazy dog. 1234567890

The quick brown fox jumps over the lazy dog. 1234567890

The quick brown fox jumps over the lazy dog. 1234567890

The quick brown fox jumps over the lazy dog. 1234567890

The quick brown fox jumps over the lazy dog. 1234567890

The quick brown fox jumps over the lazy dog. 1234567890

The quick brown fox jumps over the lazy dog. 1234567890

The quick brown fox jumps over the lazy dog. 1234567890

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

The quick brown fox jumps over the lazy dog. 1234567890

The quick brown fox jumps over the lazy dog. 1234567890

Issues

Changelog

Version 0.2 - November 12, 2008

Version 0.1 - October 18, 2008