HTML and CSS Reference
In-Depth Information
Was für die Titelzeile der Farbverlauf ist, sind für die Schaltflächen die runden Ecken.
Die folgenden CSS-Zeilen fügen genau diese Rundungen an den jeweiligen Ecken mit
einem Radius von
10px
der Liste hinzu:
#navigation ul li:first child a{
webkit border top right radius: 10px;
webkit border top left radius: 10px;
}
#navigation ul li:last child a{
webkit border bottom right radius: 10px;
webkit border bottom left radius: 10px;
}
Das Ergebnis kann sich nach dem Hinzufügen dieser wenigen CSS-Zeilen bereits sehen
lassen und dürfte kaum noch an eine normale PC-Seite erinnern, sondern vielmehr an
eine schicke iPhone-Webanwendung:
Bild 1.6:
Webseite mit iPhone-typischer
Kopfzeile und Navigationselementen.
Jetzt ist nur noch der restliche Inhalt in die passende Form zu bringen, was bedeutet,
dass sich der Inhalt an den rechten und linken Abständen orientieren muss:
#inhalt {
margin left: 12px;
margin right: 10px;
}
Beim angezeigten Bild haben wir etwas geschummelt und das Bild bereits auf eine Breite
von 298 Bildpunkten zugeschnitten, sodass es perfekt in die Seite passt. Warum aber 298
Bildpunkte?
320 Bildpunkte ist die Breite des iPhone-Bildschirms. Wenn Sie 12 Punkte am linken
Rand (
margin-left: 12px;
) und 10 Punkte am rechten Rand (
margin-right:
10px;
) abziehen, ergibt sich die Bildbreite von 298 Pixeln.
Was man beim Bild noch hinzufügen kann, sind ähnlich wie bei den Navigationsele-
menten die Abrundungen an den Ecken. Man sieht diese Behandlung von Bildern
beispielsweise im Adressbuch des iPhones, wo ein dünner Rahmen um das Kontaktfoto
gezeichnet ist und leichte Abrundungen an den Ecken vorgenommen wurden. Die
folgende CSS-Definition verändert genau dies am angezeigten Bild:
