Text Effects

Text effects using CSS shadows

The HTML code
Just put your text inside any div or span and give it an id=style. For the example below, we are working with the text "CSS Text Effects".

Note : some of the effects can be seen only in Fireworks and Google Chrome.

text-shadow:(x-offset) (y-offset) (blur-radius) (color)
X-Offset: To position the shadow along the x-axis.
Y-Offset: To position the shadow along the y-axis
Blur-radius:To position the shadow along the y-axis
Color:To set the color of the shadow.


Here are some examples of the text effects

Text Shadow

code:

<p style="font-family: Forte; color:#000000; text-shadow: 4px 3px 8px #ffff00; text-align: center;"><font size="6">YOUR TXT HERE</font></p>

Text Shadow

code:

<p style="font-family: Forte; color:#000000; text-shadow:0px -5px 4px #ED3D1A; text-align: center;"><font size="6">YOUR TXT HERE</font></p>

Text Shadow

code:

<p style="font-family: Forte; color:#000000; text-shadow:0px 0px 4px #1532EB; text-align: center"><font size="6">YOUR TXT HERE</font></p>

Text Shadow

code:

<p style="font-family: Forte; color:#000000; text-shadow:0px -4px 0px #FF0000; text-align: center;"><font size="6">YOUR TXT HERE</font></p>

Text Shadow

code:

<p style="font-family: Forte; color:#000000; text-shadow:0px -15px 0 #fe2192; text-align: center;"><font size="6">YOUR TXT HERE</font></p>

Text Shadow

code:

<p style="font-family: Forte; color:#000000; text-shadow: 0 0 7px #1E90FF; background:#000000; color: #1E90FF; text-align: center;"><font size="6">YOUR TXT HERE</font></p>

Text Shadow

code:

<p style="font-family: Forte; color:#000000; text-shadow: -1px -1px 3px #666666, 1px 1px 3px #FFFFFF; background:#CCCCCC; color: #CCCCCC; text-align: center;"><font size="6">YOUR TXT HERE</font></p>

OVERLAPPING TXT

you want
this code?

code:

<p style="line-height:14px;text-align:center;"><span style="font-family: Forte;font-size:35px;color:#FF0000;font-style:normal;font-weight:normal;"> YOUR TXT HERE <br><span style="font-family: Forte;font-size:30px;color:#010000;font-style:italic;font-weight:normal;"> YOUR TXT HERE</span> </span> </p>

Red Lantern
Ruby

code:

<p style="line-height:14px;text-align:center;"><span style="font-family: Forte; text-shadow: 4px 3px 8px #ffff00; font-size:35px;color:#FF0000;font-style:normal;font-weight:normal;">YOUR TXT HERE<br></span><span style="font-family: Forte;font-size:30px;color:#010000; text-shadow: 4px 3px 8px #FC0202;font-style:italic;font-weight:normal;">YOUR TXT HERE</span></p>

This would be
a three layer
Overlapping text

code:

<p style="line-height:15px;text-align:center;"><span style="font-family: vivaldi; text-shadow: 4px 3px 8px #008000; font-size:45px;color:#FF0000;font-style:normal;font-weight:normal;">YOUR TXT HERE<br></span><span style="font-family: vivaldi;font-size:32px;color:#000000; text-shadow: 4px 3px 8px #FC0202;font-style:italic;font-weight:normal;">YOUR TXT HERE</span><br><span style="font-family: vivaldi; text-shadow: 4px 3px 8px #008000; font-size:31px;color:#FF0000;font-style:normal;font-weight:normal;">YOUR TXT HERE</span></p>