5 schöne Beispiele für die Formatierung von Blockqoute mit CSS

HTML-Element Blockquote und die Formatierung mit CSS

Ich möchte Ihnen heute zeigen, wie Sie mit einigen wenigen CSS-Anweisungen das HTML-Element blockquote formatieren und damit vom restlichen Text auf einer Webseite optisch und grafisch abgrenzen und verschönern können.

Meine 5 Beispiele sind im Original auf der Webseite von CSS-Tricks unter der Rubrik Examples/Beispiele zu finden und wurden dort von Chris Coyier erstellt.

Definition HTML-Element blockquote:

Das HTML-Element blockquote zeichnet ein langes Zitat aus. Es erzeugt eine eigene Zeile und muss Blockelemente beinhalten. Sie können also Zitate von anderen Webseiten oder Autoren in einem eigenen, anders formatierten Absatz hervorheben. Es handelt sich dabei jedoch um eine logische, inhaltliche Auszeichnung. Wie diese Absätze genau formatiert werden, bestimmt letztlich der Web-Browser. Die Vorgabe ist jedoch, solche Absätze auffällig und vom übrigen Text unterscheidbar anzuzeigen.

<blockquote> leitet einen eigenen Absatz für Zitate ein (blockquote = geblocktes Zitat). </blockquote> beendet den Absatz. In den strict-Varianten von HTML/XHTML muss der Inhalt des Elements von einem Block-Element umschlossen sein.

Wie Zitate genau dargestellt werden, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen. Mit CSS können Sie solche Elemente jedoch nach Wunsch formatieren.

Quelle: http://de.selfhtml.org/html/text/zitate_adressen.htm

Chris Coyier von CSS-Tricks hat auf seiner Demoseite bei den Beispielen 1, 3, 4 und 5 eine Grafik in die Formatierung mit eingebaut. Nur bei Beispiel 2 wird das HTML-Element Blockquote durch die CSS-Anweisung border-left (= linker Rahmen) ausgezeichnet.

Beispiel 1: Classy Quote

CSS-Formatierung:

blockquote.style1 {
  font: 14px/20px italic Times, serif;
  padding: 8px;
  background-color: #faebbc;
  border-top: 1px solid #e1cc89;
  border-bottom: 1px solid #e1cc89;
  margin: 5px;
  background-image: url(images/openquote1.gif);
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: 23px;
  }
  blockquote.style1 span {
     display: block;
     background-image: url(images/closequote1.gif);
     background-repeat: no-repeat;
     background-position: bottom right;
   }

Beispiel 2 – Modern Quote

CSS-Formatierung:

blockquote.style2 {
  font: 14px/22px normal helvetica, sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 50px;
  padding-left: 15px;
  border-left: 3px solid #ccc;
}

Beispiel 3: Fun Quote

CSS-Formatierung:

blockquote.style3 {
  font: 18px/30px normal Tahoma, sans-serif;
  padding-top: 22px;
  margin: 5px;
  background-image: url(images/openquote3.gif);
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: 65px;
  }
  blockquote.style3 span {
    display: block;
    background-image: url(images/closequote3.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
}

Beispiel 4: Fancy Quote

CSS-Formatierung:

blockquote.style4 {
  font: 14px/20px italic Times, serif;
  padding-left: 70px;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-right: 10px;
  background-color: #dadada;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 5px;
  background-image: url(images/openquote4.gif);
  background-position: middle left;
  background-repeat: no-repeat;
  text-indent: 23px;
}

Beispiel 5: Code Quote

CSS-Formatierung:

blockquote.style5 {
  font: 12px/18px normal "Courier New", sans-serif;
  padding-left: 70px;
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: #000;
  color: white;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 5px;
  background-image: url(images/openquote5.gif);
  background-position: middle left;
  background-repeat: no-repeat;
  text-indent: 23px;
  }
  blockquote.style5 div {
    padding-right: 50px;
    display: block;
    background-image: url(images/closequote5.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
}