Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

2. Basic iPhone Styling > Adding the iPhone Look and Feel

Adding the iPhone Look and Feel

Now it’s time to get a little fancier. Starting from the top of the page, add a 1-pixel white drop shadow to the logo link text, and a CSS gradient to the background:

#header h1 a {
    text-shadow: 0px 1px 0px #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, 
                                       from(#ccc), to(#999));
}

In the text-shadow declaration, the parameters from left to right are horizontal offset, vertical offset, blur, and color. Most of the time, you’ll be applying the exact values shown here to your text because that’s what usually looks good on the iPhone, but it is fun to experiment with text-shadow because it can add a subtle but sophisticated touch to your design.


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint