Mobile Designprinzipien - HTML5-Apps fur iPhone und Android - page 9

body {
background color: #ddd;
color: #222;
font family: Helvetica;
font size: 14px;
margin: 0; padding: 0;
}
Als Titelzeile soll nicht der gesamte Kopfbereich, wie er in div id "kopfbereich"
definiert wurde, sondern nur die erste Zeile mit dem HTML-Tag h1 verwendet werden.
Das CSS, das das Aussehen der Titelzeile definiert, wird demnach nur auf das div
#kopfbereich und das HTML-Tag h1 beschränkt:
#kopfbereich h1 {
background color: #fcc97d;
border bottom: 1px solid #666;
color: #222;
display: block;
font size: 20px;
font weight: bold;
padding: 10px 0;
text align: center;
text decoration: none;
text shadow: 0px 1px 0px #fff;
}
Mit der Farbdefinition background-color: #fcc97d; wird ein orangefarbener
Hintergrund gesetzt, der sich auch auf der PC-Seite fand. Falls Ihnen mehr nach dem
Apple-Grau der iPod-Anwendung ist, setzen Sie den Wert auf #98a8bf . Die CSS-Defi-
nition text-shadow: 0px 1px 0px #fff; versieht die dunkelgraue Schrift in der
Kopfzeile mit einem kleinen, weißen Schatten.
Damit auch die anderen Inhalte im Kopfbereich- div ordentlich dargestellt werden, auch
wenn sie nicht zur Titelzeile gehören, fügen wir noch folgendes CSS ein:
#kopfbereich h2, p {
margin left: 12px;
margin right: 10px;
}
Die Titelzeile erscheint jetzt schon als eigenständiger Block, allerdings fehlt noch der für
das iPhone typische Farbverlauf. Dieser kann entweder als Bild eingebunden oder viel
besser automatisch vom Browser über die folgende Anweisung generiert werden:
#kopfbereich h1 {
background image: webkit gradient(linear, left top, left bottom,
from(#fcc97d), to(#fcaf3b));
}