When used properly, shadows can make a good design look great. The key, of course, is the phrase “when used properly”. If you haven’t experimented with CSS shadows, here are some quick ways:
Shadow to Text using text-shadow
h3 {text-shadow: 0.1em 0.1em #999}
In this example, we are defining a grey (#999) shadow, positioned slightly to the right (.1em) and slightly below (.1em) the h3 text. The definitions are:
- The color of the shadow.
- The x-coordinate of the shadow.
- The y-coordinate of the shadow.
- The blur radius of the shadow. (not used in this example)
*Note that the coordinates are relative to the position of the text. Also, you can define the color either before or after the coordinates. Learn more about the text-shadow property at the W3C.
Drop Shadows
You can use a PNG for your shadow, as illustrated here (less code), or use pure CSS (more code), as described here. Finally, WordPress users will want to take a look at the WordPress Shadows Plugin.
Moving along: because we love tips around here, here are five tips on ways to make them work well for you:
A little goes a long way.
You may be tempted to add shadows to everything. Don’t. By restraining yourself, and apply shadows only to a few key elements, you can make the latter really “pop”.
Add subtle shadows to text.
I did say restrain yourself, but at the same time, using subtle shadows on all your text can look great. For example, the letterpress effect looks beautiful and can enhance readability- which is always a good thing.
Go lighter.
Stay away from using black as your shadow- it looks unnatural, and can make your text more difficult to read. Commonly used colors are #666, #999, and #CCC.
Experiment with multiple shadows and other techniques.
As shown in the W3C examples, you don’t have to limit yourself to just one shadow per element. Another technique is to use shadows to create text outlines (good for white text on a light background). Play around a bit, but don’t overdo it.
Test, test, test.
Finally, remember that text-shadow is not fully supported on all browsers yet. Make sure your design still looks as good as possible with lots of testing on different browsers at different resolutions.
Do you use CSS shadows?
