Text shadow using CSS3

There are many features introduced in new css3, and one of them was text shadow. you can create text border using text-shadow property in css3. check-out the last example.

Syntax for text shadow in css3 goes like this

h1{ text-shadow: 0 0 .2em #999 }

Sample Shadow

There is four parameters in text-shadow syntax

first x, y position of shadow , third blur of shadow and fourth is color.

and you can have multiple text-shadow property to one element. for define text-shadow multiple time just follow the syntax:

text-shadow{ x y [blur] [color], x y [blur] [color], ..}

here are some of amazing examples using text shadow.

Style:

style="text-shadow:0 0 .2em #333;

Demo:

Sample Shadow

Style:

style="text-shadow:1px 1px 0 #00ff00, 2px 2px 0 #00dd00, 3px 3px 0 #00aa00, 4px 4px 0 #009900;"

Demo:

Sample Shadow

Style:

style="text-shadow:2px 2px 0 #aaa, 4px 4px 0 #bbb, 6px 6px 0 #ccc;

Demo:

Sample Shadow

Style:

style="text-shadow:-6px -6px 0 #aaa, -4px -4px 0 #bbb, -6px -6px 0 #ccc;"

Demo:

Sample Shadow

Style:

style="text-shadow:0 0 .2em #ff0000;

Demo:

Sample Shadow

Style:

style="text-shadow:0 0 .2em #ff0000, 3px 3px 1em #eeff00;"

Demo:

Sample Shadow

Style:

style="text-shadow:-2px -2px 0 #d3ffd5, -4px -4px 0 #89ff8d, -6px -6px 0 #4efc54, -8px -8px .2em #00fc08,4px 4px 0 #b0e6fc, 6px 6px 0 #66d3ff, 8px 8px 0 #1ebdfc, -10px -10px .2em #049cd8"

Demo:

Sample Shadow

Style:

style="color: yellow;text-shadow: 0px 1px #ff7200,0px 2px #ff7200,0px 3px #ff7200, 0px 4px #ff7200,0px 5px #ff7200,0px 6px #ff7200,-1px 0 #ff1900, 0 1px #ff1900, 1px 0 #ff1900, 0 -1px #ff1900;"

Demo:

Sample Shadow

you can also use text-shadow property to create amazing text border around the font.

Style:

style="color:#ffe900; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;"

Demo:

This is text with border

About these ads
About

hi there, I am software engineer, working in e-commerce company and passionate about all thing digital. On this blog, I share my experiments with different technology.

Tagged with: ,
Posted in css, html
6 comments on “Text shadow using CSS3
  1. […] out my previous post about text-shadow ,  box-shadow  and Draw simple drawing board application using HTML5 […]

  2. zebideedoodah says:

    None of these examples show any shadow…

  3. Thanks man, these are great!

  4. Don says:

    There was a link to your post over at http://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/. On his site the examples of shadow worked for me in my IE 9. I see no shadow effects on your post. Switching to Chrome I do see the shadow effects on your page. Very cool!

  5. Nice one man, Keep Update. – sago

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

Follow

Get every new post delivered to your Inbox.

Join 38 other followers

%d bloggers like this: