Css3 text shadow effects

Hello Friends,

Now I am ready to introduce some css3 text shadow effect.

Css3 can spice up your design in simple and easy way . You can achieve a lot of the effects that needed java scripts and image with css3 easily with few lines . In this post I will show how to create some cool effects using text-shadow only .

Let’s Start

The property text-shadow add one or more shadow to a text .It’s included into Css3 text module .

Syntax

  • The vertical and horizontal distance 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 .

Browser Support :

  • Opera 9.5+( Although I’ve noticed that color: transparent was not supported )
  • Firefox 3.5+
  • Safari 1.0+
  • Google Chrome

 

1. Glow and extra glow

To achieve the glow effect

.glow {color:#FFFFFF ;

text-shadow:0 0 20px yellow ;

}

Try experimenting …change the radius value to get different effects .

Using the previous cc will add some glow but not as intense as sometimes you might need the solution is to add multiple shadows with different radius values .

.extraGlow {color:white;

text-shadow:0 0 30px yellow , 0 0 70px yellow ;

}

We’ve added 2 shadows with 30 and 70 radius values with the same yellow color .

2. Apple style

Pretty simple .. That’s why I love css3

applestyle{background:#666

color: #000;

text-shadow: 0px 1px 1px #fff;

}

3. Photoshop Emboss

.Emboss  {background:#ccc ;

color:#ccc;

text-shadow: -1px -1px white, 1px 1px #333;

}

I used multiple shadows here to achieve the effect one to the top/right other to the bottom/left .One down side to this is that if the browser doesn’t support text-shadow (you know what and who I’m talking about ?! :) ) then you’ll end up with unreadable text .

4. Photoshop Pillow emboss

.PillowEmboss {background:#ccc;

color:#ddd;

text-shadow: 1px 1px white,

-1px -1px #444;

}

Again multiple shadows used here .

5. Blurry text

I found this at Simurai Website. Which is a cleaver trick to make the text color transparent and add a blurred shadow to achieve a blurred text effect.Changing the radius value will change the blur value the higher the value the more blurred text you’ll get.

.blurytext {color: transparent;

text-shadow: #fff 0 0 10px;

}

6. Inset text

I found this trick at StylizedWeb .This a very light and elegant effect it adds a nice touch to the text .

.insettext{color: #344251;

text-shadow: 1px 1px 0px #bad3ed;

font-weight: bold;

background:#bad3ed;

}

The shadow color and the background color are the same .

7. Stroke text

I will admit this is not a very neat effect and needs little improvement to have “realistic” look stroke ..but thought I’ll add it any way .

.Stroke{color:red;

font-weight: bold;

text-shadow: 1px 1px 0px #000,

-1px -1px 0px #000;

}

By adding 2 shadows in the opposite directions you can have what looks like a stroked text.

8.  3D effect

I love this .. I can’t think of much uses for it but I still love it .Found this on Css-trick and thought it’s really cool .By adding multiple shadows with the same color you can achieve what looks like a 3d text .

.effect3D {
color:rgba(255,255,0,.7) ;
font-weight: bold;
text-shadow: 1px 1px rgba(255,128,0,.7),
2px 2px rgba(255,128,0,.7),
3px 3px rgba(255,128,0,.7),
4px 4px rgba(255,128,0,.7),
5px 5px rgba(255,128,0,.7);
}

Thanks to you for reading this article.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s