Es ist kein Hexenwerk, das HTML <blockquote> Element zu stylen. Viele im Internet zu findende CSS Schnipsel verwenden dafür allerdings Bilder. Obwohl die heutigen Browser das Bild nur einmalig laden und dann im Cache speichern, halte ich es für unnötigen Overhead, den man sich sparen sollte. Auch mit reinem CSS kann man durchaus ansehnliche Quotes erstellen.
blockquote {
font-family: Georgia, serif;
font-size: 14px;
font-style: italic;
margin: 0.25em 0;
padding: 0.25em 40px;
text-align: justify;
line-height: 1.45;
position: relative;
color: #7a7a7a;
background: #fafafa;
border: 1px solid silver;
}
blockquote:before {
display: block;
content: "\201C";
position: absolute;
font-size: 80px;
left: -10px;
top: -10px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
Die einzige “magic” sind die content:-Elemente. “\201C” kodiert das typographische Anführungszeichen, “\2014 \2009” erzeugt den Strich vor dem Zitat.
So sieht das Resultat letzten Endes aus:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem Ipsum
Der Code darf selbstverständlich kopiert und verwendet werden.
