Suche Menü

Initiale, erster Buchstabe groß (ENGL. DROP CAPS)

Mit CSS einen übergroßen Buchstaben (drop cap) am Anfang eines Absatzes gestalten.

Text Initialen sind seit vielen Jahren im Print-Bereich ein gängiges Stilierungs-Mittel, um den ersten Buchstaben Drop Cap in einem Absatz hervorzuheben. Der erste Buchstabe eines Absatzes oder Artikels wird dabei groß geschrieben, um den Text spannender und ansprechender zu gestalten. Im Webdesign ist diese Methode der Textgestaltung leider noch wenig verbreitet, da die verschiedenen Browser Drop Caps unterschiedlich oder gar nicht darstellen.

Seit CSS3 gibt es die Möglichkeit mit Hilfe der CSS Pseudoklasse  „:first-child :first-letter“ Drop Caps Browserkompatibel umzusetzen.

Im Beispiel gestalte ich mit Hilfe der CSS Pseudoklasse „:first-letter“ einen großen
Buchstaben am Anfang des Textes, der gesamte Text erhält einen fetten Schriftstil
(ChunkFiveRegular) die mit @font-face in das  Webdesign eingebunden wird.
Über die CSS3 Eigenschaft „text-shadow“ erhält der Text noch einen zusätzlichen Effekt.

drop cap mit css stylen
Demo
Ziel ist es, dass nur der erste Absatz im Dokument mit einem Drop Cap beginnt, hierzu mache ich mir die CSS Pseudoklasse „:first-child“ zu nutzen.
Mit der CSS Eigenschaft „line-height“ wird eine zusätzliche Zeilenhöhe festgelegt, damit es auch im IE und Opera Browser zu keinen Darstellungsproblemen kommt.
Das CSS zur Demo

@font-face {
font-family: 'ChunkFiveRegular';
src: url('schrift/Chunkfive-webfont.eot');
src: url('schrift/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
url('schrift/Chunkfive-webfont.woff') format('woff'),
url('schrift/Chunkfive-webfont.ttf') format('truetype'),
url('schrift/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
font-weight: normal;
font-style: normal;
}

body {
font-family: 'ChunkFiveRegular',
Sans-Serif; color: #fff;
}

p {
font-size: 50px; line-height: 80px;
text-transform: uppercase;
text-shadow: 6px 6px 0 rgba(255,255,255,0.07);
}

p:first-child:first-letter {
font-size: 160px;
float: left;
margin: 20px 20px 0 0;
line-height: 0.8;
text-shadow: 4px 4px 0 #566074, 7px 7px 0 #fff;
}

div {
width: 730px;
margin: 150px auto;
background-color:#936;
padding:20px; 
}

cite {
color: #CCC;
font-size: 14px;
margin-top: 5px;
line-height: 20px;
}

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

Über den doppelten Textschatten
(text-shadow: 4px 4px 0 #566074, 7px 7px 0 #fff;)
erhält der Drop Cap einen coolen stilvollen Effekt.
Das HTML zur Demo

<body>
<div>
<p>Man braucht zwei Jahre .....</p>
<p><cite>by Ernest Hemingway</cite></p>
<p>Zweiter Absatz ohne Drop Cap  </p>
</div>
</body>

Als Quelle für diesen Artikel diente mir der Artikel von Chris Spooner
Wer mehr über die Historie über Drop Caps erfahren möchte, für den ist der Artikel auf smashingmagazine.com lesenswert.