Categories
Mobile

Mobile: Targeting a page to be in a mobile screen

Here’s the live example (plagiarized from http://oreilly.com/catalog/9780596805784/):

http://onsubject.com/mobile_examples/iphone_look/

1) font-family: Helvetica; is the recommended font for simulating the iphone look and feel

2) text-shadow: 0px 1px 0px #fff; adds a little bit of a white background to the bottom of the text on the header

3) background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)); Interestingly enough, the background gradient is not an image, but a gradient effect…

4) Note how the rounded corners effect is applied to the a instead of the ul, so it avoid the “square” click effect when first and last child of the list are clicked

Leave a Reply

Your email address will not be published. Required fields are marked *