CSS3 Property: text-shadow

Image from http://blog.greer-inc.com

I haven’t said it before but I’m really looking into becoming a Web Developer full-time. I came to the conclusion that we must do what we love and if we aren’t doing it we won’t be able to achieve happiness (I truly love Web Dev/Design).

I recently joined Treehouse and let me tell you, WHAT AN AMAZING COMPANY! I will write a review about Treehouse and Code School later on. Stay tuned! 😉

Now, enough of that and let’s get our hands dirty!  🙂

Based on what I have been learning about CSS and some of the cool properties in CSS3, I decided to show some examples when using text-shadow. There are an infinite amount of websites out there that have pretty awesome examples, but for the sake of it I decided to show some of my styles.

Here we go:







As you can see, the text-shadow property can add a lot of character to your text!

Remember to have a firm understanding on how the values affect the text-shadow:

text-shadow: 1px 2px 8px #000;

1px –> Horizontal Shadow
2px –> Vertical Shadow
8px –> Blur Distance
#000 –> Color

Here are some awesome links with a lot of information to get you started:




http://css3gen.com/text-shadow/ <– Easily generate your text-shadow !

As a bonus, if you want an online Color Palette you can go ahead and visit this website: