Text-shadow, for all browsers

The CSS 3 standard text shading attribute and alternative for older browsers.

The shadow effect to the characters of a text exists in Internet Explorer from the version 5.5 as a filter ActiveX. It was generalized to all browsers by becoming a property of CSS 3.

Demonstration

Syntax

The text-shadow property is followed by a definition or a list of definitions separated by a comma.

You can cancel the property with the definition: text-shadow: none.

Each definition is composed of four parameters, two of which being optional.

Color. Optional. The default is the color of the text.
Horizontal offset. The width of the shadow that extends to the right if the value is positive. A negative value add it on the left.
Vertical offset. This is the height of the shadow, down if positive, up otherwise.
Blur. Optional, defaults to 0. An integer value greater than zero makes a slightest shadow.

The standard code

.tshadow
{
  text-shadow: 1px 1px 2px black;
}

Halo effect

To surround the characters with a halo effect:

.halo
{
  text-shadow: 1px 1px 2px black, 0 0 1em gray, 0 0 0.2em gray;
}

Example:

Demonstration

Internet Explorer code

Up to version 8 of Internet Explorer, you must use a filter. It is an ActiveX control and it will only work if the user allows the use of ActiveX which actually is is also essential when a page contains Ajax code, before IE version 10.

The filter has four parameters.

Shadow color.
Direction. 0=top, 45=top right, 90=right, 135=bottom right, 180=bottom, 225=bottom left, 315=top left.
Strength. The amount of blur, a higher value making it lighter.

Adding a shadow with Internet Explorer

.tshadow
{
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=2);
}

The code on Internet Explorer for the halo effect, as standard, combines two definitions:

.halo
{
  filter:
     progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=2)		  
     progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=315,strength=2);
}

The direction 135 adds a shadow on the lower right and direction 315 on the upper left.

The complete CSS code

<style>
.tshadow
{ 
  text-shadow: 1px 1px 2px black;
}
.halo
{
  text-shadow: 1px 1px 2px black, 0 0 1em gray, 0 0 0.2em gray;
}
</style>
<!--[if lte IE 8]> 
<style type="text/css"> 
.tshadow 
{
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=2);
}
.halo 
{
  filter:
     progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=2)		  
     progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=315,strength=2);		  
}
</style> 
<![endif]-->

If you want to use a separate stylesheet, the page must insert an additional file for IE:

<!--[if lte IE 8]> 
<link type="text/css" href="ie6.css" rel="stylesheet">
<![endif]-->

Which contains the definitions for .tshadow and .halo.

JavaScript

Accessing to these properties in JavaScript ...

Standard

object.style.textShadow="1px 2px 2px gray";

Internet Explorer

object.style.filter="progid:DXImageTransform.Microsoft.Shadow(...)";