CSS3 Property: text-shadow

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:

text-shadow

text-shadow

text-shadow

text-shadow

text-shadow

 

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://www.w3schools.com/cssref/css3_pr_text-shadow.asp

http://css-tricks.com/almanac/properties/t/text-shadow/

http://www.w3.org/Style/Examples/007/text-shadow.en.html

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:

http://paletton.com

Cheers!

Leave a Reply

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