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

The standard code

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.

The code of the demo:

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

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.

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 CSS code for all browsers

<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.

For accessing these properties in JavaScript ...

Standard

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

Internet Explorer

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