Back in the days of OS X 10.1 I wasn’t a really big fan of the striped backgrounds, overblown transparency, and over-the-top animations Apple was using to show off their new desktop. However, in the last few releases they’ve tightened up the look of their OS, made it much more consistent, and have ended up with a really nice design that I find very inspiring. The OS X aesthetic has of course translated over to the iPhone, where it’s even more elegant.
One of the little touches that I really like is that label-style text on a gradient or colored background has a slight emboss effect that really makes it pop off the background and gives everything a nice 3D physicality without being too overt. You can see examples on the iPhone, in button and header text as well as the icons on the top bar:
I fiddled around in Fireworks for a while trying to replicate the effect, but I couldn’t quite get it right until I asked a friend at work, who quickly pointed out that it’s really just a simple drop shadow, not any sort of emboss effect. I guess my eye had seen a more complex effect than what what actually there. Anyway, it’s pretty simple: you add a drop shadow with no fuzz, 50% opacity. If you have light text, you add a black shadow that is cast straight up, and if you have dark text, a white shadow that’s cast straight down. That’s all there is to it!
I went ahead and applied this effect to the “BRH.numbera.com” text on the top of my site, and I really like the way it makes the text pop off of the background.
Now that I knew how to do it, I decided that the low-contrast menu text on my site could also benefit from such an effect, but I wasn’t going to go and replace every bit of text in the menu with images. So instead, I used a CSS3 property that’s supported in Safari 3, Opera 9.5, and the upcoming Firefox 3.1: text-shadow. I’d already used text-shadow to put some soft drop shadows on the links across the top of my site and the section header, so it wasn’t too hard to add them to the links. All that was required is:
text-shadow: 0 1px 0 #C9DFF3;
So that says to make a shadow straight down (0px right, 1px down), 0 fuzz, and the color #C9DFF3. I had to pick that color because text-shadow doesn’t have an opacity property built in. Of course, using another CSS3 feature, HSLA colors, I can make a shadow that works on any background:
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
And for light-colored text:
text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
I ended up keeping the hand-chosen background color in addition to the HSLA version since Opera supports text-shadow but not HSLA. So now I have a cute little enhancement to my site that users of cutting-edge browsers will get to enjoy.
Note that Google Chrome, despite being based on the same WebKit core as Safari, doesn’t support text-shadow since Google had to provide their own rendering layer (Apple uses their own proprietary renderer).
Tags: 
Entries
