1

text shadow

This text shadow tutorial will demonstrate some CSS that will show you how shadows can be applied to standard text in you HTML. The CSS property text-shadow is one of the easier and more versatile CSS3 properties and you can do more with it than just shadow text. By using text-shadow you can have the appearance of engraved text, glowing text, blurred text and even text that is on fire! So enough with the chat lets get to some examples of text-shadow.

text shadow example


Congratulations. You're not illiterate.


If you're viewing this on Internet Explorer I'm afraid you're not seeing the text shadow effect. It's a shame really because it's quite impressive. Might we suggest you use a different browser like Firefox or Chrome and while we're on the subject of browser compatibility we should mention the text-shadow property is compatible with Firefox 3.5+, Chrome 2+, Opera 9.5+ and Safari 1.3+


The Syntax

text-shadow: 7px 5px 3px #CCC;

what does it all mean?

The declaration (text-shadow:) The color of the text-shadow (#CCC) The X-coordinate of the text shadow relative to the text e.g. left and right. Positive for right and negative for left (7px). The Y-coordinate of the text shadow relative to the text e.g. up and down. Positive for down and negative for up (5px). The Blur of the text shadow. Where zero is no blur and over 100 is just fuzz.

more fun with text shadow

As we said earlier in the tutorial, the text-shadow property is one of the most versatile properties of CSS3 The following are some fun examples, albeit mostly useless, but maybe they will inspire you to do other creative things in web design with text-shadow other than just shadowing text.




This is Engraved Text




The Syntax
 
font-size: 48px; 
text-shadow: text-shadow: 0px -1px -1px #fff;




 I'm on fire!




The Syntax

color:#fffddb; 
font-size: 48px; 
text-shadow: 0 0 4px #fffdd1, 0 -5px 4px #fff79e, 2px -10px 6px #fff200, 
             -2px -15px 11px #ffbf00, 2px -18px 18px #ff0000;

Blurred Text






The Syntax

color:#fff; 
font-size: 48px; 
text-shadow: text-shadow: 0px 36px 6px #666;

more CSS Text Effects

Have a question about text shadows?

Leave us a comment and we'll see if we can answer your questions. We might be a web design company in Shenzhen, China, but we're always online and happy to help the developer community.

Let's get started!

Let's get into contact so you learn more about us and we can create solutions for you!