[CSS3] Text Shadows

 

CSS3 provides you with some amazing text effects that can make your web pages look impressive and stylish.

 

1. text-shadow

The “text-shadow” property applies shadow to text.

text-shadow: h-offset v-offset [blur-distance] [spread-distance] color;

p#texta { font-size:2em; text-shadow: 2px 2px red; }
p#textb { text-shadow: 2px 2px red, 4px 4px green; }

Note that you can specify multiple shadows in a single definition.

textshadow1

 

2. Blurring Effect

The third paramter specifies the depth of the blurring effect.

p#texta { text-shadow: 2px 2px 4px red; }
p#textb { text-shadow: 2px 2px 8px green; }

textshadow2
 

3. Letterpress Effect

The letterpress effect gives an inset or debossing appearance to text. You can create this effect using the “text- shadow” property without using PhotoShop.

div.letterpress
{
  font-family:Tahoma,Arial; color:#333; font-size:4em;
  text-shadow:0px 3px 3px #666;
}

textshadow3
 

4. Neon Glow Effect

You can create the neon glow effect by setting the values like this:

  • horizontal offset : 0px
  • vertical offset : 0px
  • blur distance : non-zero

By doing so, text will look like glowing.

div.neon
{
  font-family:Tahoma; font-size:4em;

  text-shadow:
    0px 0px 6px green,
    0px 0px 10px #0c0;
}

textshadow4

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s