HTML5 in der mobilen Webentwickung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 34

<footer>
<h1>Sharky's Fußzeile</h1>
</footer>
Listing 2.6 Sharky's WebApp mit Inhalt, Kopf- und Fußzeile
border-radius
Mit border-radius gestalten Sie abgerundete Ecken. Der Umfang der Abrundung wird
dabei in Pixeln oder Prozent angegeben. Sie können alle Ecken in gleichem Maße
abrunden oder auch nur bestimmte Ecken. Dies geschieht über die Bezeichnungen
top , bottom , left und right . Besonders bei Schaltflächen werden abgerundete Ecken
gerne genutzt. Gestalten Sie die CSS-Definition der Kopfzeile ( header ) folgenderma-
ßen, um abgerundete Ecken hinzuzufügen, eine Hintergrundfarbe zuzuweisen und
den Text zu zentrieren (Abbildung 2.6):
header {
border-radius: 15px;
background-color:#1384ed;
text-align:center;
}
Damit die Kopfzeile etwas größer erscheint, sollten Sie die zuvor angelegte Über-
schriftenformatierung in der Definition header h1 ändern:
header h1 {
font-size:40px;
color:#fff;
text-transform:uppercase;
}
Abbildung 2.6 Die Kopfzeile in Blau mit abgerundeten Ecken