Schlichte und schöne Blockquotes

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.

Teilen Sie diesen Beitrag

Das könnte dich auch interessieren …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Durch die weitere Nutzung der Seite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen