how to make shadow on text using css

how to make shadow on text using css

CSS level 3 has a property called ‘text-shadow’ to add a shadow to each letter of some text. In its simplest form, it looks something like this:

h3 {text-shadow: 0.1em 0.1em #333}

Which adds a dark gray (#333) shadow a little to the right (0.1em) and down (0.1em) relative to the normal text. The result looks like this:

The noak and the barcicle

(As of August 2005, not all browsers fully support ‘text-shadow’ yet. The above should work at least in Safari and Konqueror.)

FUZZY TEXT SHADOW

The simplest form of the ‘text-shadow’ property has two parts: a color (such as the #333 above) and an offset (0.1em 0.1em in the example above). This results in a sharp shadow at the indicated offset. But the offset can also be made fuzzy, resulting in a more or less blurred shadow.

The amount of fuzziness is given as another offset. Here are two lines, one with a little fuzziness (0.05em) and one with a lot (0.2em):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

“What do you say?” said the freelancingdesign.com

In order to see more clearly freelancingdesign.com

READABLE WHITE TEXT freelancingdesign.com

Shadows can make text more readable if the contrast between the foreground and the background is small. Here is an example of white text against a pale blue background, first without a shadow and then with:

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Without shadow:

how to make shadow on text using css, css, css3, html, bootstrap, freelancingdesign, MULTIPLE SHADOWS

With shadow:

With a shovel and some oranges

MULTIPLE SHADOWS

You can also have more than one shadow. In general, that looks rather strange:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

526 total views, 2 views today

Loading Facebook Comments ...

1 Comment. Leave new

I truly appreciate this article. Really Great.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Enter the captcha code *

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.

Coupon Code "HAPPY10" - Get Discounts upto 90% + 10% off on Purchase of themes/templates and Plugins