Wie Sie Zitate mit CSS gestalten können

6 Styling Blockquotes – 6 Zitate mit CSS gestalten

6 Styling Blockquotes – 6 Zitate mit CSS gestalten

Es gibt die Möglichkeit, in Ihren Blogartikeln Zitate von Fremdautoren in einem eigenen, anders formatierten (zumeist eingerückten) Absatz hervorzuheben. Dazu verwendet man üblicherweise das HTML-Element <blockquote>.

<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 und CSS aber keinen Einfluss. Die Browser benutzen Default-Formatierungen.

Fertiges Ergebnis ansehen / Download Beispieldateien (Zip-Datei – 7,9 KB)

Styling Blockquotes – Zitate mit CSS gestalten

Ich möchte Ihnen heute in meinem Artikel zeigen, wie Sie mit einigen wenigen CSS-Anweisungen schöne und optisch ansprechende ‚Blockquotes‘ erstellen und Zitate je nach Wunsch formatieren können. Ich habe auf der Webseite von CSS Newbie einen schönen Artikel zu diesem Thema gefunden.

Originalartikel: Six Ways to Style Blockquotes

Ich habe auf der Basis dieses Artikels die CSS- und HTML-Formatierungen ein wenig umgearbeitet und möchte Ihnen nachfolgend das Ergebnis präsentieren.

1. Blockquote ohne Formatierung

Einleitend sehen Sie zuerst ein Zitat, welches überhaupt nicht formatiert ist.

Blockquote ohne Formatierung

Danach finden Sie von Punkt 2 bis Punkt 5 verschiedene Formatierungsmöglichkeiten, die ich Ihnen hiermit etwas näher vorstellen möchte:

2. Farbe und Rahmen

Linker Rahmen und Text in gleicher Farbe

Farbe und Rahmen

CSS:

#border {
        margin: 1em 3em;
        color: #690;
        border-left: 4px solid #690;
        padding-left: 1em; }

3. Hintergrund-Farbe

Einsatz von Hintergrund-Farbe

Einsatz von Hintergrund-Farbe

CSS:

#bgcolor {
        margin: 1em 3em;
        padding: .5em;
        background-color: #cc0; }
#bgcolor p {
        margin: 0; }

4. Rahmen und Hintergrund-Farbe

Kombination von Hintergrund-Farbe und linkem Rahmen

Rahmen und Hintergrund-Farbe

CSS:

#border-bgcolor {
        margin: 1em 3em;
        padding: .5em 1em;
        border-left: 5px solid #fce27c;
        background-color: #f6ebc1; }
#border-bgcolor p {
        margin: 0; }

5. Hintergrund-Grafik/Bild

Hier kommt eine Hintergrund-Grafik zum Einsatz

Einsatz einer Hintergrundgrafik - Background-Image

CSS:

#bgimage {
        margin: 1em 20px;
        padding-left: 50px;
        background: transparent url(quote.gif) no-repeat; }

6. Drop-Cap(Initial) und zarte Linie links

Anfangsbuchstabe (Drop Cap = Initial) mit CSS gestalten und am linken Rand eine zarte senkrechte Linie zum Einsatz bringen.

Drop-Cap und zarte Linie links

CSS:

#dropcap {
        margin: 1em 2em;
        border-left: 1px dashed #999;
        padding-left: 1em; }
#dropcap p:first-letter {
        float: left;
        color: #920c0d;
        margin: .2em .3em .1em 0;
        font-family: "Sketch Rockwell", "Apple Chancery", fantasy;
        font-size: 420%;
        font-weight: bold; }
#dropcap p:first-line {
        font-variant: small-caps; }

Fertiges Ergebnis ansehen / Download Beispieldateien (Zip-Datei – 7,9 KB)

Tweet about this on TwitterShare on Google+0Share on Facebook0Email this to someone

Schreib einen Kommentar

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