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

// Text des Buttons ändern
$('button').text("Und jetzt, shake it!").toggleClass("shakeit");
});
};

Listing 6.9 Die gesamte Funktion »neuespolaroid«, die ein neues Polaroid aus dem Flickr-
Feed lädt und den Text des Buttons anpasst

6

Bisher wird diese Funktion noch an keiner Stelle aufgerufen. Dies werden Sie im
nächsten Schritt ändern. Doch zunächst gilt es, ein paar grundlegende CSS-Eigen-
schaften festzulegen, um etwas mehr Polaroid-Feeling aufkommen zu lassen.

6.3.3 Die CSS-Datei

Sie haben bereits CSS-Eigenschaften für den Container des Flickr-Bildes sowie des
button -Elements festgelegt, nun widmen Sie sich den anderen Containern. Zum Start
formatieren Sie die Seiteneigenschaften über body :

body {
margin: 25px 0;
padding:0px;
background:url(../bilder/holz.jpg);
text-align:center;
}

Weil Sie einen guten Geschmack haben und es zudem einfach cool aussieht, ent-
schließen Sie sich, den Hintergrund der WebApp durch eine Holztextur aufzufri-
schen. Eine Menge guter, frei verwendbarer Texturen finden Sie unter http://
backgrounds.mysitemyway.com/ . Das Bild legen Sie im Unterordner bilder ab und
verlinken es dementsprechend in der CSS-Datei.

Damit der Eindruck eines echten Polaroids entsteht, sollten Sie den Container
polaroid-rahmen noch dementsprechend gestalten:

.polaroid-rahmen {
border: 15px solid #fff;
border-bottom-width: 60px;
background-color:#fff;
width:240px;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
}

Neben einem weißen Hintergrund und einem leichten Schatten fügen Sie den typi-
schen Polaroid-Rahmen, der unten etwas größer ist, hinzu.