How-to: CSS3 shadow effects – Part One
With the introduction of CSS3 we have the ability to add drop shadows to our websites. Whether it be adding an effective yet stylish text shadow or adding a shadow to a content box to make it stand out, all major browsers (except for IE9 which only supports the Box Shadow) now support the yet to be finalized CSS3 tags. In this two part series you’ll learn how to add shadows to both text and boxes.
How to create a CSS3 Text Shadow
To enable Text Shadows in CSS3 you must make sure you have one of the following types of browsers that support it as a minimum: Firefox 3.6, Safari 4, Google Chrome 4/5, Opera 10.50. Unfortunately IE9 does not support text-shadow as seen on the list of CSS compatibility list.
CSS3 Text Shadow
text-shadow: 2px 3px 4px #333;
The break down
From left to right here is the break down of the text-shadow attributes:
- Blur Radius
- Color of the shadow
Adding a text-shadow is pretty simple, the only limitation is your imagination, oh and Internet Explorer.
What not to do
With the introduction of such useful tags into the website ecosystem people will by nature abuse this new ability by creating ugly shadows on content that doesn’t need or require it. Remember the 90′s when everyone was getting into Photoshop? So many people added a drop shadow to their layouts thinking it looked cool. Sorry people! It doesn’t look cool to overuse an effect in your designs!