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

What people say about post?
Rose on Awesome wordpress ecommerce…

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 34 other followers

Follow

Get every new post delivered to your Inbox.

Join 34 other followers

%d bloggers like this: