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

Welche Eigenschaften und Werte bietet CSS?

Die Gestaltungsmöglichkeiten via CSS sind sehr vielfältig und würden an dieser Stelle
den Rahmen des Buches sprengen. Für eine Auflistung aller Eigenschaften empfehlen
wir Ihnen die folgende Webseite: http://www.w3schools.com/cssref/default.asp

2

2.3.4 Die Neuerungen von CSS3 - welche sind heute schon einsetzbar?

Sie haben nun die grundlegende Vorgehensweise kennengelernt, wie Sie mit CSS
gestalten. Ihre Sharky WebApp besteht allerdings im Moment lediglich aus etwas
Text und ist noch nicht sonderlich hübsch anzuschauen. Das werden Sie nun ändern.

Neben dem HTML- wird auch der CSS-Standard kontinuierlich weiterentwickelt. In
der aktuellsten Version CSS3 wurden einige Funktionen und Definitionen eingefügt,
die das Leben der Entwickler und Designer wieder etwas leichter machen.

Da sich CSS3, genau wie HTML5, im Entwurfsstadium befindet und sich Bezeichnun-
gen noch jederzeit ändern können, verwenden alle gängigen Browser Präfixe, das
heißt eigene Definitionen, die nur für sie gelten. Die Eigenschaft box-shadow müssen
Sie z. B. im CSS-Code folgendermaßen angeben, damit der Schatteneffekt in der Web-
Kit-Engine Ihres Smartphones richtig dargestellt wird:

-webkit-box-shadow: 7px 7px 5px #000000;

Über -webkit werden alle webkitbasierten Browser, wie z. B. Safari, Mobile Safari und
Google Chrome, angesprochen.

Im Folgenden erweitern Sie die Sharky WebApp um einige neue CSS3-Effekte. Bevor
es losgeht, sollten Sie den bisherigen HTML-Code der WebApp etwas sortieren. Set-
zen Sie den header -Bereich an den Anfang des Inhalts und den footer -Bereich an das
Ende des Dokuments. Des Weiteren ändern Sie den Text in Kopf- und Fußzeile etwas
ab. Der komplette Code innerhalb des body -Bereichs sollte damit so aussehen:

<header>
<h1>Sharky's WebApp</h1>
</header>

<h1>Herzlich Willkommen!</h1>
<p>Mein Name ist Sharky und ich erschrecke leidenschaftlich gerne Menschen.
Schauen Sie sich doch einfach mal in meinem Zuhause, dem <a href="http://
www.html5-rockt.de/">Aquarium</a> um.</p>

<h1 class="sharky">Sharky, der Jaguarhai</h1>
<p>Sharky's Eltern waren auch schon richtige Draufgänger und große Fans des
Films "Der weiße Hai".</p>