Gestaltung einer Pull Quote mit HTML-Text

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen den Text für eine "Pull Quote" (wörtlich "Lockzitat") mit Stildefinitionen versehen, damit er sich von der Standardeinstellung unterscheidet. Nicht weiter hervorgehobenen Zitaten sieht man nicht ohne Weiteres an, dass sie von einem anderen Autor stammen (siehe die nächste Abbildung), während entsprechend hervorgehobene Zitate leicht zu erkennen sind (siehe die darauf folgende Abbildung).

Standarddarstellung des Textes in einer Pull Quote

Abbildung: Standarddarstellung des Textes in einer Pull Quote.

Die Pull Quote mit eigenen Stildefinitionen

Abbildung: Die Pull Quote mit eigenen Stildefinitionen.

Lösung

Verwenden Sie das Element blockquote, um eine "Pull Quote" in der Dokumentstruktur als Zitat zu kennzeichnen:

<blockquote>
  <p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.</p>
  <div class="source">John Smith at the movies</div>
</blockquote>

Weisen Sie dem blockquote-Element nun mit Hilfe von CSS Werte für die Innen- und Außenabstände und die Farbe zu:

blockquote {
 margin: 0;
 padding: 0;
 color: #555;
}

Danach definieren Sie die Stile für die im blockquote-Element enthaltenen p- und div-Elemente:

blockquote p {
 font: italic 1em Georgia, Times, "Times New Roman", serif;
 font-size: 1em;
 margin: 1.5em 2em 0 1.5em;
 padding: 0;
}
blockquote .source {
 text-align: right;
 font-style: normal;
 margin-right: 2em;
}

Diskussion

Pull Quotes werden benutzt, um die Aufmerksamkeit des Lesers zu erregen, damit er Ihren Text auch weiterliest. Eine einfache Methode, Pull Quotes zu erstellen, besteht darin, die Textfarbe zu ändern. Sie können den Kontrast zum übrigen Text noch weiter erhöhen – zum Beispiel durch einen Wechsel der allgemeinen Schriftfamilie. Wird der übrige Text eines Dokuments beispielsweise in einer serifenlosen Schrift dargestellt, so benutzen Sie für die Pull Quote eine Schrift mit Serifen.

Siehe auch

Das Rezept Pull Quotes mit Rahmen und das Rezept Pull Quotes mit Bildern für weitere Informationen zur Gestaltung von Pull Quotes mit CSS.

  

<< 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