Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method GoogleSitemapGenerator::Enable() should not be called statically in /home/pixelshell/pixelshell.com/blog/wp-includes/plugin.php on line 160
Pixelshell | Blog » Apple’s Inverted Text Shadow
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 446

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 510

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 511

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 446

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 510

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 511

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 446

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 510

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 511

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 446

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 510

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 511

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 446

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 510

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 511

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 446

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 510

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 511

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 446

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 510

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 511

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 446

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 510

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 511

Apple’s Inverted Text Shadow

on Jan 25, 2008


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

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:

normal button state

The mouse hover state of the same button:

button hover state

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.


11 Comments »

  1. Comment by Myles de Bastion — Jan 25, 2008 @ 8:02 pm


    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

    Very observant of you Dmitry.

    I wonder how many designers are going to start copying this effect now?

  2. Comment by Dmitry Fadeev — Jan 25, 2008 @ 8:08 pm


    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

    At least one…ahem ;)

  3. Comment by Piyush — Jan 29, 2008 @ 9:08 pm


    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

    Simple yet effective way to display buttons, good observations Dmitry!

  4. Comment by Peter Green — Apr 29, 2008 @ 9:19 am


    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

    Yes, but how do you do it? (in GIMP).

  5. Comment by Dmitry Fadeev — Apr 29, 2008 @ 1:44 pm


    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

    I don’t use GIMP personally, but this should be similar to Photoshop. You have different ways of going about this — the simplest would probably be to add a drop shadow to the text, then change the shadow color to white (for the first example). In Photoshop you would also change the shadow mode to Normal, otherwise it won’t show the white (because it’s shading the stuff underneath, rather than just drawing the shadow).

    Also just make sure the shadow size is 0, the angle is 90 degrees and the distance is 1 pixel. For the white text/black shadow, just change the angle to -90 and the shadow to black, as well as the text color to white.

    This effect can also be done with CSS3 when more browsers support it (at the moment it will work in Safari). You would use the text-shadow property:

    For the first one:
    text-shadow: #000 0 1px 0;

    For the second one:
    text-shadow: #FFF 0 -1px 0;

    The first value is the color, the second is the x-axis location. Third is y-axis (so we’re moving it down by 1 pixel and up by 1 pixel) and the final is blur. You can increase the blur to make the shadow bigger — 0 has no blur.

  6. Comment by Peter Green — Apr 29, 2008 @ 4:30 pm


    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

    Great, thanks an excellent reply! :-)

  7. Comment by Jack Hoge — Jan 7, 2009 @ 5:48 pm


    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

    I really like this style too and tried it out a while back with a thin inner shadow and bevel instead of a drop shadow. It’s not quite as crisp as the process noted above, but it’s quick and easy.

  8. Comment by Interlock Industries — Sep 6, 2009 @ 10:10 pm


    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

    Wanted to say hello
    Thanks!
    Interlock Roofing
    Interlock Industries

  9. Comment by Tunseflelve — Oct 29, 2009 @ 2:48 pm


    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

    Svidjaju li Vam se njena stopala?
    Uclanio sam se na njen site i mogu reci da ima jako lijepa stopala!
    Stopala su na njoj najbitnija stavka!

  10. Pingback by Apples text shadow « Rachel Philogene — Nov 7, 2011 @ 3:50 am


    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

    […] http://www.pixelshell.com/blog/apples-inverted-shadow/ Share this:TwitterFacebookLike this:LikeBe the first to like this post. […]

  11. Comment by the north face skor — Oct 18, 2014 @ 6:11 pm


    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

    Myt: Operating Within the Cold kommer att skada mina lungor
    the north face skor http://www.galleristrombom.se/images/se/the-north-face-skor.asp

RSS feed for comments on this post. TrackBack URL

Leave a comment

Contact Information

If you would like a quote or a project proposal, just click here to fill in our short client web form and we'll get right back to you.

Direct Contact Details

Email Email: info@pixelshell.com Skype Tel: +44 (0)20 8816 8876