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

box-shadow

Mit box-shadow erstellen Sie einen Schlagschatten. Dabei können Sie Distanz des
Schattens, Farbe und Schärfe festlegen. Im Fall der Sharky-WebApp möchten Sie der
Fußzeile einen Schlagschatten verpassen. Dazu gestalten Sie den Schlagschatten und
zentrieren den Text wie folgt:

2

footer {
box-shadow: 2px 5px 10px #ccc;
text-align:center;
}

Dieser Schatten wird 2 Pixel auf der Horizontalen und 5 Pixel auf der Vertikalen ver-
schoben. Die Unschärfe wird mit 10 Pixel angegeben. Der Farbton des Schattens ist
ein leichtes Grau ( #ccc ).

Da es sich hier um eine Fußzeile handelt, möchten Sie die Schrift noch etwas dezen-
ter darstellen (Abbildung 2.7). Passen Sie dazu die Definition von footer h1 wie folgt
an:

footer h1 {
font-size: 20px;
color:#ccc;
text-transform:uppercase;
}

Abbildung 2.7 Die Fußzeile mit einem Schlagschatten und grauem Text