How to built shadow text using CSS

What comes first in my mind,whenever I am thinking about creating a shadow text,just go to photoshop and uses shadow property(inner shadow ,outer shadow) ,but css3 provides a just a single line of code.
To apply text shadow onto an element, add this CSS property in its style definition.

text-shadow: 3px 3px 4px #000;

The text-shadow property looks cool, but it is currently not supported by major browsers including Firefox 3.0, but will be supported in Firefox 3.1 beta. Browsers that support this CSS3 property are Safari 3+, Konquerer, Opera9.5+ and iCab.

For example,

This text will show a drop shadow in Safari, Opera or other supported browsers.

css3textshadow by you.

Here first two values are offset of shadow from original text corresponding to right and top offset respectively while third numeric value is the amount of blur radius that causes pixels of the shadow text to stretch by the specified amount.

Positive values for right and top offset will position your shadow to right and bottom while negative values will change it accordingly.

You can play with offset and blur values to create really nice looking text effects just with CSS. If you have been using this property for a while and created some really nice looking effects, let us know in comments below.

Why text-shadow is good?
The main goal of this property is to give designers and css coders a tool to make text effects, which could only be done before by rendering text as images with all the side effects. Text rendered as an image isn’t searchable and therefore very undelicious for search engines. Another side effect is the fact that images can be way more bigger as one small line of code in terms of file size. As you may know most css-files, which contain the whole layout of a website, are smaller than one image on most websites. So it’s really clever to use a css function instead of images for reducing unnecessary traffic.

You may also like...

8 Responses

  1. NEW PRODUCTS says:

    How to built shadow text using CSS | Tech Prone: Mobile trends and the need of gadgets We are in the era of scie.. http://bit.ly/Zx4gU

  2. Nitesh patel says:

    well harshit i think now really you are playing with css and php its cool.

    Nitesh patel’s last blog post..How to make standard email for website domains using Gmail aps

  3. techprone says:

    RT @tweetmeme How to built shadow text using CSS | Tech Prone http://digg.com/d1tk5q?t

  4. Flat Rock NC says:

    30387 995501Really fascinating topic , thanks for putting up. 201542

  5. 70155 13957brilliantly insightful post. If only it was as easy to implement some of the solutions as it was to read and nod my head at each of your points 546743

  6. 808301 699715I observe there is actually a lot of spam on this weblog. Do you want support cleaning them up? I may possibly support in between courses! 362898

  7. 4g network says:

    470547 440666We provide you with a table of all the emoticons that can be used on this application, and the meaning of each symbol. Though it might take some initial effort on your part, the skills garnered from regular and strategic use of social media will create a strong foundation to grow your business on ALL levels. 832604

Leave a Reply