rss

Creating Apple Text Shadow Effect: Photoshop V CSS

28 Nov, 2010 Phil Featured, Web Design
Creating Apple Text Shadow Effect: Photoshop V CSS

Owning an iPhone, I regularly attend the App store, iTunes and their website.  One aspect that I think has been a nice touch is Apple’s text and in particular, their shadow shading.  Today, I am going to replicate this effect in two different ways:

1. Via Photoshop
2. Via CSS on a webpage

Both have similar results, so I’ll talk you through how to achieve the desired effect using both.



PHOTOSHOP

This is quite easy really and just makes use of a dropshadow effect on text.

1.  Open up a new layer on a white background


2. Draw a square / rectangle and shade it with a gradient (I used a gradient of #9f9f9f for the dark and #e6e5e5 for the light).  You can use any colours really, but Apple like their greys in menu’s etc, so I’ll stick with that).


3.  Type your text by selecting the Tool type (T) and selecting where you want the text to go.  I used the colour #595959 for this example.


4. Open the effects for the text by double clicking the text layer in the bottom right.  We’ll be adding a ‘drop shadow’ effect, so select that:


5.  All we are doing here is changing the settings of the drop shadow, so you need to change:

  • Blend mode: Normal
  • Opacity: 89%
  • Angle: 900
  • Distance: 1
  • Spread: 0
  • Size: 0

the next image shows you the final settings:



And that’s it!.  See below the effect this has:




CSS

Css styling accomplished the same thing, but on a web page. View demo

1.  So here, I will use the gradient square I drew in the Photoshop example above, minus the text:


2.   We create a div with this image as a background:

.applebg {
background: url(applebg.jpg) no-repeat;
width: 295px;
height: 313px;
}


3.  Then the HTML with some text added: (minus the spaces)


< div class="applebg">
< div class="appletext">Apple loves this Shadow text< /div>
< /div>


with some CSS:

.applebg {
background: url(applebg.jpg) no-repeat;
width: 295px;
height: 313px;
}
.appletext {
font-family:Verdana, Sans-serif;
font-size: 15px;
text-align: center;
padding-top: 145px;
color: #595959;
}


…and you should get something that looks like this:


4.  Once we have this, we need to add the shadow effect.  We do this by adding to the text class:

text-shadow: 0 1px 0 #fff;


So the complete CSS for this would now look like this:


.applebg {
background: url(applebg.jpg) no-repeat;
width: 295px;
height: 313px;
}
.appletext {
font-family:Verdana, Sans-serif;
font-size: 15px;
text-align: center;
padding-top: 145px;
color: #595959;
text-shadow: 0 1px 0 #fff;
}


Share this post:
  • email
  • Add to favorites
  • PDF
  • Facebook
  • Twitter
  • Digg
  • MySpace
  • Google Bookmarks
  • del.icio.us
  • NewsVine
  • Ping.fm
  • Reddit
  • Yahoo! Buzz
  • Technorati
  • StumbleUpon
  • Sphinn
  • RSS

About Phil

Phil is creative director at PSM Digital but also freelances with web design and SEO in Manchester, UK. He researches and studies online business, along with the latest technological advances and development in design, SEO and social media.

3 Comments

  1. Glad you found it useful.

  2. Thank you for sharing this nice tut.
    I was looking for this a while. All other tuts discribe how to create Apple´s glossy effect.
    I will use your tut for my website relaunch.

Leave a Reply

About The One Man Mission...

Hi I’m Phil. Welcome to my blog, where you’ll find useful information on web design, development and online business advice.  I’m a creative director for a digital agency in Manchester, UK and I also freelance web design also.  Currently setting up and developing a new online business, I am here...

Read More »

Find me at:

  • twitter
  • facebook
  • linkedin
  • youtube
  • flickr

Photos on Flickr...