As I’ve been playing more with Safari lately, I’ve found that many good looking web sites add a bit of something extra for Safari. They use CSS to add a drop shadow to certain elements of the page. Take a look at this example from LightHouse (Firefox 2.0 on the left, Safari 3 on the right):

Firefox vs. Safari rendering of the CSS 'text-shadow'

From Word Up! Creating Dynamic Visual Presentations:

A drop shadow on your text helps set apart your words from their background thus making them easier on the eyes.

And you can see that in the example above. Adding the slight, but dark drop shadow to the white text on the blue color makes it more readable. It’s a nice touch that makes the UI feel like it has an extra set of polish. The CSS is simple enough:

text-shadow: 2px 2px #055B98;

While most mortals won’t get to enjoy the effect, you don’t develop just for mere mortals, do you? Kick your game up a notch.

comments powered by Disqus