WebApps mit Frameworks entwickeln - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 297

Um die Darstellung des Bildes etwas aufzulockern, fügen Sie diesem über die Klasse
schatten in der styles.css einen Schatten, einen Rahmen und eine leichte Drehung
hinzu. Damit das Bild auf einem Tablet in voller Pracht und auf einem Smartphone
nicht zu groß angezeigt wird, legen Sie außerdem noch die Breite des Bildes auf 95 %
fest. Die Höhe wird automatisch berechnet, um eine Verzerrung zu vermeiden.

.schatten {
width:95%;
height:auto;
border:6px solid #fff;
box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.85);
-webkit-transform:rotate(1deg);
}

8

Listing 8.3 Die Gestaltung eines Schattens für das Bild

Wie Sie merken, wird der Inhalt bereits in kleinen Teilen formatiert. Bei der Über-
schrift und dem Fließtext greift bereits das jQuery-Mobile-CSS. Sie passen nun das
CSS etwas an, um der WebApp mehr Charakter zu verleihen. Nachdem das ange-
schrägte Bild die Startseite schon etwas auflockert, möchten Sie zum einen ein Hin-
tergrundmuster festlegen und zum anderen die Schriftart etwas maritimer gestalten.
Für das Hintergrundmuster bietet die Webseite http://www.subtlepatterns.com eine
umfangreiche Auswahl an reduzierten und wenig aufdringlichen Mustern, die Sie
ebenfalls kommerziell einsetzen dürfen. Der Einsatz von solch einfachen und redu-
zierten Mustern lockert klinisch-weiße Hintergründe etwas auf. Aufgrund von Was-
ser & Co. entscheiden Sie sich für ein blaues Muster mit dem Namen Blu Stripes
( http://subtlepatterns.com/?p=1043 ) und verknüpfen es in Ihrer styles.css Datei:

[data-role=page] {
background-image: url(http://subtlepatterns.com/patterns/blu_stripes.png);
}

Attribute sprechen Sie in CSS über den Einsatz von eckigen Klammern an. Damit
bekommt jedes Element mit dem Attribut data-role und dem Wert page als Hinter-
grundbild das Blu Stripes -Muster zugewiesen (Abbildung 8.3).

Ah, schon viel besser. Spüren Sie die Seebrise und den Salzduft in der Luft?

Als Nächstes kümmern Sie sich um die Typografie, die im Moment noch zu charak-
terlos daherkommt. Hierbei helfen Ihnen wieder die Google Webfonts ( http://
www.google.com/webfonts ). Herr Mattisen liebt geschwungene Schriften, weswegen
Sie sich bei den Überschriften für die Leckerli One entscheiden. Da stark geschwun-