Recently, I’ve started noticing an interesting design change in Apple’s user interfaces, mainly on their site, but also a lot on the iPhone. The design item is an inverted shadow—that is, a shadow falling above, rather than below the text. Here’s an example from their website’s navigation bar:
The normal state of the “iPhone” button:
The mouse hover state of the same button:
As you can see, the shadow is falling upwards. Why is this? I’m not 100% sure but it seems Apple wants to achive an engraved feel to the text—to make the text seem ‘cut-out’. In the first picture, we can clearly see the effect, achieved using the highlight below the text.
In the second picture, since the text is now white, the only way to keep it engraved would be to apply a shadow to the top. If it was at the bottom it would make the text pop out. It’s an interesting effect that I haven’t seen used very much, but I really like it—makes a nice change to the normal style drop shadows.