HTML and CSS Reference
In-Depth Information
4.4.2 Animieren mit -webkit-transition
Stellen Sie sich folgendes Szenario vor: Sie haben eine Seite mit Text. Über diesem
Text möchten Sie ein kleines Banner einbauen, das sich beim Aufruf der Seite auto-
matisch von oben ins Bild schiebt. Das Banner könnte weitere Informationen bein-
halten oder auf etwas anderes, wie z. B. die aktuelle Größe von Sharky, hinweisen -
ein durchaus übliches Szenario bei der Entwicklung einer WebApp.
4
Der Kern Ihres HTML-Codes sieht wie folgt aus:
<div class="banner">Mein Bannertext</div>
<article>
<p>Hier steht etwas Blindtext.</p>
</article>
Wie schon in vorherigen Beispielen verzichten wir hier aus Platzgründen auf einen
längeren Blindtext. Sie sollten allerdings etwas mehr Text verwenden, um den Effekt
besser sehen zu können. Sie erinnern sich noch an http://www.lipsum.com ?
Den dazugehörigen CSS-Code gestalten Sie wie folgt:
body {
margin:0px;
padding:0px;
}
.banner {
background-color:#0000ff;
color:#fff;
height:50px;
padding:10px;
}
article {
padding:10px;
}
Listing 4.12 Ein paar einfache CSS-Definitionen, um das Grundgerüst zu gestalten
Sie setzen nun zunächst die Seitenränder auf null, damit das Banner schön mit dem
Browserrand abschließt. Danach weisen Sie dem Banner ein verführerisches Blau als
Hintergrundfarbe zu, definieren die Höhe und ebenfalls die Abstände der Inhalte
zum Rand des Elements. Geben Sie außerdem dem Element article etwas inneren
Abstand, damit der Text besser zu lesen ist (Abbildung 4.39).
Search WWH ::




Custom Search