CSS 3-D Text Effects.

One of the best ways to optimize a web site is to elimiminate as many images as possible. With CSS you no longer need to use images or JavaScript to create 3-D text effects. To keep things simple I'll show an example that works in IE6+ and FireFox 3.1+

For Firefox and most modern browsers except IE we'll use the CSS property text-shadow. For IE we'll use the filter property. No need to worry about browser detecters or seperate style sheets.

This example makes your text appear as if the light is coming from the upper right of the page which is the default effect in IE if no coordinates (direction) are specified.

#myshadow
{
filter:shadow(color:black);
text-shadow: -4px 4px 3px #000;
}

You can see it see it in action on the top menu at DuaneDawnrae.com

The text-shadow property accepts four values:

1. The color of the text-shadow (#000)
2. The X-coordinate of the text-shadow (-4px), relative to the text. Positive values apply the shadow effect relative to the right of the text.
3. The Y-coordinate of the text-shadow (4px), relative to the text. Negative values apply the shadow effect relative to the top of the text.
4. The blur radius of the text-shadow (3px), is the amount of space the shadowtext is stretched, causing a blur effect. 0 means: no blur

The filter:shadow property accepts 4 values (the above example with all values is filter:shadow(color:black, direction=225, enabled=true, strength=8);

1. The color of the filter:shadow(black)
2. The direction of the shadow effect which is a number from 0 - 315
3. True or False value that sets whether the filter effect is enabled or not (Default is enabled= true)
4. The strenght is the distance in pixels that the filter effect extends

How the finished shadow effect appears in a browser depends on the font size, font color, shadow color and background color.