CSS für Anfänger – Wie Sie ganz einfach Drop Caps erstellen

Wie Sie mit Drop Caps den ersten Buchstaben eines (Ab)satzes mit CSS extra formatieren

CSS für Anfänger - Wie Sie ganz einfach Drop Caps erstellen

Fertiges Beispiel ansehen: hier |
Beispieldateien herunterladen: hier

Drop Caps (Initialen) mit CSS gestalten

Wenn Sie die Absicht haben, die Textformatierung Ihrer Webseite bzw. Ihres Blogs zu verbessern (verschönern), ist der Einsatz von sogenannten Initialen bzw. Drop Caps ein tolles und interessantes Stilmittel.

Der erste Buchstabe eines Artikels oder Absatzes wird dabei groß geschrieben, um den Text spannender und ansprechender zu gestalten.Dies können Sie ganz einfach mit einigen Zeilen CSS und HTML umzusetzen. Und was ganz wichtig ist, die Formatierung wird von allen gängigen Browsern richtig dargestellt!

So wird es gemacht! Meine 2 Musterbeispiele

Sie müssen zuerst den 1. Buchstaben eines Satzes im HTML-Code in einen span-tag (= Inline-Element) setzen. Danach muss dem span-tag eine eigene CSS-Klasse (hier dropcap-eins bzw. dropcap-zwei) zugewiesen werden.

Die HTML-Formatierung sollte ungefähr so aussehen:

<p><span class="dropcap-eins">E</span>ine Initiale oder ein Initial....</p>

bzw.

<p><span class="dropcap-zwei">L</span> orem ipsum dolor sit amet.....</p>

Danach gestalten Sie den einzelnen Buchstaben mit den CSS-Anweisungen, um den Initial-Buchstaben vom übrigen Text abzugrenzen.

CSS bzw. HTML-Code für Drop Caps Nummer 1

CSS bzw. HTML-Code für Drop Caps Nummer 1

Der CSS-Klasse dropcap-eins gebe ich dann – wie bereits erwähnt – die folgenden speziellen CSS-Eigenschaften:

CSS-Code:

.dropcap-eins {
   float: left;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 400%;
   line-height: 1; /* wichtig */
   text-transform: uppercase; /* IMMER als Großbuchstabe darstellen */
   background-color: #fafafa;
   color: #aaa;
   padding: 0 5px ;
   border: 2px solid #ccc;
   margin-right: 10px;
   margin-top: 7px; /* je nach Umständen ggfs. anpassen */

HTML-Code:

<p><span class="dropcap-eins">E</span>ine Initiale
oder ein Initial....</p>

CSS bzw. HTML-Code für Drop Caps Nummer 2

CSS bzw. HTML-Code für Drop Caps Nummer 2

Die CSS-Klasse dropcap-zwei bekommt abschließend die folgenden CSS-Anweisungen:

CSS-Code:

.dropcap-zwei {
    float: left;
    color: #903;
    font-size: 75px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
    font-family: Georgia; }

HTML-Code:

<p><span class="dropcap-zwei">L</span> orem ipsum
dolor sit amet.....</p>
Fertiges Beispiel ansehen: hier |
Beispieldateien herunterladen: hier
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 *