CSS3 text-shadow Effects

Hi folks, i created the examples on the CSS3 property text-shadow.

The text-shadow property is supported in all major browsers, except Internet Explorer.

Syntax

The text-shadow property attaches one or more shadows to text. Th

e property is a comma-separated list of shadows, each specified by 2 or 3 length values and an optional color. Omitted lengths are 0.
Horizontal and Vertical shadow: can have + or – values. They also can have the value 0.
Blur radius: Represents the size of the blur effect if the value is zero or it wasn’t represented then the shadow won’t be blurred.
Color: is the shadow color. If it is not represented then the shadow color will use the text color instead.

text-shadow: horizontal-shadow vertical-shadow blur color;

Glow Effect

.glow { 
   color:#fff;
   text-shadow:0px 0px 20px #00c6ff; }

Inset Effect

body { 
   background-color:#666;
}

.inset {
   color:#202020;
   text-shadow: 0px 2px 3px #777;
}

Stroke Effect

body { 
   background-color:#666;
}

.stroke {
   color:#202020;
   text-shadow: 1px 1px 0px #999, -1px -1px 0px #999;
}

3D Effect

body { 
   background-color:#666;
}

.3deffects {
   color:#202020;
   text-shadow: 1px 1px 0px #999, 
    2px 2px 0px #999,
    3px 3px 0px #999,
    4px 4px 0px #999,
    5px 5px 0px #999; 
}

Share this post