Unerwartete Unstimmigkeiten erzeugen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Die Aufmerksamkeit des Lesers soll erreicht werden, indem zwei Elemente kombiniert werden, die eigentlich nicht zusammenpassen.

Lösung

Platzieren Sie ein Element visuell im anderen. In der Website aus der folgenden Abbildung, in der die Erde kurz vor einem Zusammenstoß mit einem Asteroiden gezeigt wird, wurde das Bild der Erde mit der Darstellung eines Billardspiels kombiniert.

Bild der Erde wurde vor Abbildung eines Billardspiels montiert

Abbildung: Das Bild der Erde wurde vor die Abbildung eines Billardspiels montiert.

Der HTML-Code zu diesem Beispiel ist recht einfach:

<h2><span class="no">Earth News</span></h2>
<p>Earth escapes potential impact with killer asteroid; will we escape the next one in 2014? <a href="more.html">Read more</a></p>

Im CSS-Code wird die Abbildung des Billardspiels als Hintergrundbild des Elements body definiert. Die Grafik wird in der linken oberen Ecke verankert. Zudem benutzen wir die Bild-Ersetzungstechnik aus dem Rezept HTML-Text durch ein Bild ersetzen, um ein h2-Element durch das Foto der Erde auszutauschen:

<style type="text/css">
 body {
  background-color: #009E69;
  margin: 0;
  background-image: url(billiard.jpg);
  background-repeat: no-repeat;
 }
 h2 {
  background-image: url(earth.gif);
  position: absolute;
  width: 126px;
  height: 126px;
  z-index: 1;
  left: 166px;
  top: 69px;
 }
 .no {
  display: none;
 }
 p {
  width: 120px;
  margin: 260px 100px 0 170px;
  font-family: Verdana, sans-serif;
  font-size: small;
  font-weight: bold;
 }
</style>

Diskussion

Die Darstellung von etwas Unerwartetem ist eine hervorragende Möglichkeit, um Aufmerksamkeit zu erregen. Durch die geschickte Kombination zweier Elemente zu einem Bild (siehe auch die folgende Abbildung) kann die Aufmerksamkeit des Lesers gesteuert oder einfach die Bedeutung des Inhalts unterstrichen werden.

Miteinander kombinierte Fotos eines Kindes und eines Mannes

Abbildung: Miteinander kombinierte Fotos eines Kindes und eines Mannes.

In diesem Beispiel haben wir zwei Bilder verwendet: Ein Foto einer Billardkugel haben wir als Hintergrund für das Element body benutzt. Das Bild der Erde wurde als Hintergrund für das h2-Element bestimmt. Dessen Wert für position wurde mit absolute festgelegt. Anhand der Eigenschaften left und top wurde das Bild der Erde schließlich an die richtige Position verschoben und auf diese Weise über die Darstellung des Billardspiels montiert.

Siehe auch

Das Rezept Scheinbar unpassende Dinge kombinieren, um Kontraste zu erzeugen zur Kombination scheinbar nicht zusammenpassender Elemente und das Rezept Verschiedene Bildformate miteinander kombinieren.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln