Auslesen des Bewegungssensors mit JavaScript - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 253

Sie kennen diese Syntax bereits aus vorhergehenden Kapiteln. Sie weisen per jQuery
dem Container flickr-bild eine neue CSS-Eigenschaft background zu. Als Wert für die
Webadresse des Hintergrundbildes setzen Sie hier den Inhalt von randomImageCor-
rect . Damit das Bild nun noch richtig skaliert wird, bedarf es folgender Definitionen
in der CSS-Datei:

.flickr-bild {
width:240px;
height:240px;
background-color:#f8f8f8;
background-size:cover;
opacity:0;
-webkit-transition: all 1s ease-in-out;
}

6

Zum einen setzen Sie hier die Größe des Flickr-Fotos auf 240 × 240 Pixel. Relevant für
die Größenanpassung des Bildes ist die Eigenschaft background-size mit dem Wert
cover . Das kommt Ihnen bekannt vor? Richtig, am Anfang des Buches haben wir Sie
auf einige neue CSS3-Features, darunter auch background-size:cover , hingewiesen.
Zum Schluss definieren Sie noch zwei Eigenschaften, die Sie aber erst im weiteren
Verlauf benötigen. Setzen Sie die Sichtbarkeit ( opacity ) auf 0 und -webkit-transition
auf all 1s ease-in-out; . Diese beiden Eigenschaften sind nachher Teil des Einblend-
effekts, wenn Sie das Gerät schütteln.

Nun aber zurück zur HTML-Datei. Weitere CSS-Definitionen legen Sie im späteren
Verlauf des Kapitels fest. Um den Benutzer darauf hinzuweisen, dass er nach dem
Laden des Bildes sein Gerät schütteln muss, wechseln Sie den Text des Buttons aus
und fügen diesem außerdem noch eine CSS-Klasse hinzu. Diese CSS-Klasse namens
shakeit färbt den Button von einem kräftigen Orange in ein himmlisches Blau, wel-
ches dem Benutzer signalisiert, dass sich etwas verändert hat und ihm somit klar
macht, was er als Nächstes zu tun hat.

// Text des Buttons ändern und CSS-Klasse hinzufügen
$('button').text("Und jetzt, shake it!").toggleClass("shakeit");

An dieser Stelle springen Sie noch schnell ins CSS und fügen folgende CSS-Eigen-
schaften für den Button und die shakeit -Klasse hinzu:

button {
-webkit-appearance: none;
border-radius: 4px;
border: 1px solid #fc8e3d;
background-color: #f66800;