Suche Menü

Typografie im Webdesign

HTML Textauszeichnung Blockquote/Pull Quote


Demo anschauen
Ursprünglich aus dem Printbereich kommend, erfreuen sie sich auch im Webbereich großer Beliebtheit. Gerade bei längeren Textpassagen sind Pull Quotes und Blockquotes ein praktisches Typografisches Hilfsmittel um bestimmte Textpassagen besonders hervor zu heben und den Text spannender zu gestalten.

Pull Quotes befinden sich in der Regel rechts oder links im Fließtext und beinhalten ein
Zitat aus dem gerade dargestellten Text (einige Wörter werden herausgepullt).

Blockquotes sind Zitate aus anderen Quellen die inhaltlich zum Artikel passen, diese
befinden sich meistens im Fließtext und beinhalten auch das Attribut <cite>, welches benutzt wird um auf den Verfasser des Zitates hinzuweisen.
Zusätzlich zu den üblichen Absätzen <p> können Innerhalb eines <blockquote> Tags beliebige andere HTML-Tags stehen, einschließlich <header>, <footer> und Bilder auch
Überschriften H1 bis H6 sind erlaubt.

Blockquotes und Pull Quotes können mit Css oder JavaScript optisch gestylt werden.

Eigene Plull Quotes erstellen und mit CSS verschönern.

Da Pull Quotes im HTML nicht vorkommen wird über eine CSS Klasse <pull> das
Standartmäßige <blockquote> zu <pull quote> umfunktioniert.
Um die Position des Pull Quote zu bestimmen, wird zusätzlich die CSS-Klasse für rechts oder linksbündig genutzt (alignright/alignleft).

Das HTML
<blockquote class=“pull alignright“>Hier steht der Text rechtsbündig.</blockquote>
<blockquote class=“pull alignleft“>Hier steht der Text linksbündig.</blockquote>
Mit CSS Styles wird das Aussehen der Pull Quotes angepasst zb. kursive Schrift, andere Hintergrundfarbe, Schlagschatten, Anführungszeichen und und und..

Hier das CSS Style aus der Demo.

blockquote.pull.alignleft, blockquote.pull.alignright{
	font-size: 100%; 
	padding: 25px 10px 30px 10px;
}

blockquote.pull.alignleft { background-color: #83b4bb;
float:left;
text-align: center; 
width: 35%;
-webkit-border-radius: 5px; 
border-radius: 5px; 
-webkit-box-shadow: 5px 5px 4px rgba(39, 39, 39, 0.33); 
-moz-box-shadow: 5px 5px 4px rgba(39, 39, 39, 0.33);
box-shadow: 5px 5px 4px rgba(39, 39, 39, 0.33);
}

blockquote.pull.alignright { color: #ba0505;
float:right; 
text-align:left; 
width:35%; 
-webkit-box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.42);
-moz-box-shadow:    5px 5px 5px rgba(50, 50, 50, 0.42);
box-shadow:         5px 5px 5px rgba(50, 50, 50, 0.42);
}

Eigene Blockquote erstellen und mit CSS verschönern.

Schon in den Printmedien wurden Zitate in übergroße Anführungszeichen gesetzt, so auch im Beispiel <blockquote>. Realisiert wurde das Anführungszeichen mit der Pseudo-Klasse :before womit sich vor dem eigentlichen Content beliebige Elemente einfügen lassen, näheres über die Pseudo-Klassen :before und :after kann auf der Webseite selfhtml nachgelesen werden. Das vorangestellte Anführungszeichen wird in hexadezimaler Form dargestellt, näheres darüber kann auch auf der Webseite selfhtml nachgelesen werden.
Ist zwar etwas fummelig bis das Anführungszeichen richtig sitzt, dafür spart man aber den Einsatz von Grafiken.

Das HTML
<blockquote>copy warnte das Blindtextchen, da, wo sie herkäme wäre sie…..<cite>Verfasser des Zitats</cite></blockquote>

Hier das CSS Style aus der Demo.

blockquote {
font-family: "georgia", serif;
font-size: 120%;
font-style: italic;
width: 80%;
margin: 20px;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}

blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

blockquote.pull:before {
content: " ";
}

blockquote.pull p:before { content: ' " ' ' ';  }
blockquote.pull p:after { content: ' ' ' " ';  }

Einige schöne, moderne Inspiration für das stylen von blockquotes, mit CSS, sind auf der Webseite
Codedrops zu finden