Text Shadow Effects in CSS3


Posted on: Jul 2nd, 2009

CSS3 allows you to apply shadows to text and eliminates the need of using Photoshop to do it. It is very simple and all you have to do is just add a new property to an element. It’s:

text-shadow: 2px 2px 2px #333;

This code will apply a gray show to the text. This effect can be seen on Safari 3 and above, Opera 9.5+, Firefox 3.1+, Konqueror and iCab.

If you are using one of the above mentioned browser, you must be able to see the shadow behind the title of this post. If not, here’s a small preview:
css3 text shadow

Some explanation about this property:

2px 2px 2px

…will add shadow in right-down direction.

0 2px 2px

..adds shadow in downwards direction.

2px 0 2px

…adds shadow towards right.

And as far shade is concerned, if your background is light in color, use the following colors: #000 or #333 or #666 or #999. This depends on the background color and as well as the color of the text to which you are applying the effect.


About the author


Santhosh is the Founder of noob2geek. Is also an Web Designer and a Blogger. He is a self-proclaimed techie and geek. He is also an student of Bachelor of Science at Bangalore University. And loves listening to music and spends his free time reading Science stuffs.


http://www.noob2geek.com/wp-content/plugins/sociofluid/images/digg_48.png http://www.noob2geek.com/wp-content/plugins/sociofluid/images/stumbleupon_48.png http://www.noob2geek.com/wp-content/plugins/sociofluid/images/delicious_48.png http://www.noob2geek.com/wp-content/plugins/sociofluid/images/technorati_48.png http://www.noob2geek.com/wp-content/plugins/sociofluid/images/google_48.png http://www.noob2geek.com/wp-content/plugins/sociofluid/images/myspace_48.png http://www.noob2geek.com/wp-content/plugins/sociofluid/images/facebook_48.png http://www.noob2geek.com/wp-content/plugins/sociofluid/images/twitter_48.png
Leave a Reply


Latest Posts

Tags

under contruction..