HTML and CSS Reference
In-Depth Information
Bild 1.4:
Fertig ist eine iPhone-
typische Kopfzeile in Orange.
Die Farbangaben bestimmen einen Verlauf von einem hellen Orange in ein dunkles
Orange. Wollen Sie die iPhone-Grautöne verwenden, ändern Sie in der CSS-Definition
für
#kopfbereich h1
die folgenden Zeilen:
background image: webkit gradient(linear, left top, left bottom,
from(#b2bcc8), to(#76859a));
text shadow: 0px 1px 0px #222;
color: #fff;
Diese Angaben versehen die Kopfleiste mit einem grauen Farbverlauf, einer weißen
Schrift und einem umgekehrten dunklen Schatten.
Bild 1.5:
Eine Kopfzeile im iPhone-
typischen Grau mit weißer Schrift.
Ein wirklicher Problembereich war die Navigationsspalte, als die Webseite mit der PC-
Formatierung auf dem iPhone angezeigt wurde. Die Links waren zu klein und somit
schwer anzutippen und sahen auch überhaupt nicht nach den gewohnten Linkflächen
einer iPhone-Webanwendung aus. Mit den folgenden CSS-Definitionen werden die
Links, die als
li
-Elemente aufgelistet waren, in große, schöne Schaltflächen umge-
wandelt. Dabei wird eine weiße Hintergrundfarbe für die Schaltflächen benutzt, die mit
einem 1 Pixel starken Rahmen umgeben sind:
div#navigation ul {
list style: none;
margin: 10px; padding: 0;
}
div#navigation ul li a {
background color: #FFFFFF;
border: 1px solid #d9d9d9;
color: #222222;
display: block;
font size: 17px;
font weight: bold;
margin bottom: 1px;
padding: 12px 10px;
text decoration: none;
}
