Comments on: Apple’s Inverted Text Shadow http://www.pixelshell.com/blog/apples-inverted-shadow/ Promoting Web Standards and teaching web design tricks of the trade Wed, 08 Sep 2010 05:52:17 +0000 http://wordpress.org/?v=2.2.2 By: Tunseflelve http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-7636 Tunseflelve Thu, 29 Oct 2009 20:48:12 +0000 http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-7636 Svidjaju li Vam se njena stopala? Uclanio sam se na njen site i mogu reci da ima jako lijepa stopala! <a href="http://www.lorenarenko.com" rel="nofollow">Stopala</a> su na njoj najbitnija stavka! 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!

]]> By: Interlock Industries http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-6493 Interlock Industries Mon, 07 Sep 2009 04:10:15 +0000 http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-6493 Wanted to say hello Thanks! <a href="http://www.vermontsbestroof.com/" rel="nofollow">Interlock Roofing</a> <a href="http://www.rhodeislandsbestroof.com/" rel="nofollow">Interlock Industries</a> Wanted to say hello
Thanks!
Interlock Roofing
Interlock Industries

]]> By: Jack Hoge http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-5113 Jack Hoge Wed, 07 Jan 2009 23:48:30 +0000 http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-5113 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. 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.

]]> By: Peter Green http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-1313 Peter Green Tue, 29 Apr 2008 22:30:28 +0000 http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-1313 Great, thanks an excellent reply! :-) Great, thanks an excellent reply! :-)

]]> By: Dmitry Fadeev http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-1309 Dmitry Fadeev Tue, 29 Apr 2008 19:44:25 +0000 http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-1309 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. 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.

]]> By: Peter Green http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-1304 Peter Green Tue, 29 Apr 2008 15:19:20 +0000 http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-1304 Yes, but how do you do it? (in GIMP). Yes, but how do you do it? (in GIMP).

]]> By: Piyush http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-400 Piyush Wed, 30 Jan 2008 03:08:00 +0000 http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-400 Simple yet effective way to display buttons, good observations Dmitry! Simple yet effective way to display buttons, good observations Dmitry!

]]> By: Dmitry Fadeev http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-388 Dmitry Fadeev Sat, 26 Jan 2008 02:08:03 +0000 http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-388 At least one...ahem ;) At least one…ahem ;)

]]> By: Myles de Bastion http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-387 Myles de Bastion Sat, 26 Jan 2008 02:02:10 +0000 http://www.pixelshell.com/blog/apples-inverted-shadow/#comment-387 Very observant of you Dmitry. I wonder how many designers are going to start copying this effect now? Very observant of you Dmitry.

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

]]>