iPhone-Look-and-Feel hinzufügen

Zeit, noch etwas schicker zu werden. Fangen wir oben auf der Seite an und fügen wir einen 1 Pixel breiten weißen Schlagschatten zum Text des Logo-Links und einen CSS-Farbverlauf zum Hintergrund hinzu:

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

In der text-shadow-Deklaration sind die Parameter von links nach rechts: horizontaler Abstand, vertikaler Abstand, Unschärfe und Farbe. Meist werden Sie genau diese Werte Ihren Texten zuweisen, denn das sieht auf einem iPhone nun einmal gut aus. Es macht trotzdem Spaß, mit text-shadow herumzuspielen, denn es kann Ihrem Design einen subtilen, aber raffinierten Touch verleihen.

Die Zeile ...

Get iPhone Apps mit HTML, CSS und JavaScript now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial