english version

Oftmals sind es die „kleinen Dinge“, die ein Gesamtes perfekt erscheinen lassen. Wenn man Zeit auf die Gestaltung der Details einer Website investiert, ist das keine Verschwendung von Ressourcen, sondern ergibt ein harmonisches Gesamtbild – eine Website, die man immer wieder gerne besucht. Ein Teil dieser „Detail-Gestaltung“ ist zum Beispiel das Design des ersten Buchstaben eines Absatzes.

Das CSS Pseudo-Element ::first-letter lässt sich mit einigen CSS-Eigenschaften gestalten, darunter alle Font-Eigenschaften, alle Hintergrund-Eigenschaften, Farben, Ränder und Text- sowie Box-Shadow uvm. (s. hier). CSS-Animations und CSS-Transitions funktionieren leider nicht mit ::first-letter.

Heute möchte ich Ihnen zeigen, wie Sie den ersten Buchstaben eines Absatzes gestalten können, um mehr Aufmerksamkeit für Ihre Texte zu erzielen. Ich zeige Ihnen fünf Beispiele von einfach bis anspruchsvoll hinsichtlich des CSS-Codes. Diese sind im Einzelnen:

1. Erster Buchstabe fetter
2. Erster Buchstabe größer und farbig
3. Erster Buchstabe mit Border-Radius, Box-Shadow und Background
4. Erster Buchstabe mit Border, Border-Radius, anderer Schriftart, Text-Shadow und gestalteter first-line
5. Erster Buchstabe mit Border Image

Der HTML-Code

Der HTML Code ist sehr einfach gehalten: Es gibt nur Absätze und in den letzen beiden Beispielen werden diese Absätze in ein article-Element gepackt. Die Absätze erhalten CSS-Klassen, damit sie spezifisch gestaltet werden können.

1. Beispiel: Erster Buchstabe Bolder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper, massa eu rhoncus porttitor, enim dui scelerisque augue, sed eleifend quam dolor rhoncus dolor. Nunc sit amet ornare mi, eu vestibulum lectus. Mauris ac ultricies felis.

      
CSS Code
.bold::first-letter {
  margin-right: 2px;
  font-weight: bold;
}
    

Anmerkungen zum CSS-Code

.bold::first-letter

• margin-right: 2px: Schafft Platz zwischen dem ersten Buchstaben und den folgenden Buchstaben.
• font-weight: bold: Macht den ersten Buchstaben fett.

2. Beispiel: Erster Buchstabe größer und farbig

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper, massa eu rhoncus porttitor, enim dui scelerisque augue, sed eleifend quam dolor rhoncus dolor. Nunc sit amet ornare mi, eu vestibulum lectus. Mauris ac ultricies felis.

      
CSS Code
.color-large::first-letter {
  margin-right: 2px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #3636E8;
}
    

Anmerkungen zum CSS-Code

.color-large::first-letter

• margin-right: 2px: Schafft Platz zwischen dem ersten Buchstaben und den folgenden Buchstaben.
• font-size: 1.5rem: Macht den ersten Buchstaben größer.
• font-weight: bold: Macht den ersten Buchstaben fett.
• color: #3636E8: Färbt den ersten Buchstaben blau.

3. Beispiel: Erster Buchstabe mit Border-Radius, Box-Shadow und Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper, massa eu rhoncus porttitor, enim dui scelerisque augue, sed eleifend quam dolor rhoncus dolor. Nunc sit amet ornare mi, eu vestibulum lectus. Mauris ac ultricies felis.

      
CSS Code
.multi-style::first-letter {
  margin-right: 5px;
  padding: 5px;
  vertical-align: bottom;
  font-size: 3em;
  color: #115111;
  border-radius: 5px;
  background-color: rgba(14,90,14,.3);
  box-shadow: -5px 1px 5px -2px rgba(0,0,0,.75);
}
    

Anmerkungen zum CSS-Code

.multi-style::first-letter

• margin-right: 5px: Schafft Platz zwischen dem ersten Buchstaben und den folgenden Buchstaben.
• padding: 5px: Gibt dem ersten Buchstaben mehr Raum.
• vertical-align: bottom: Richtet die erste Zeile an der Unterkante des ersten Buchstabens aus. Beachten Sie, dass die Basis in diesem Fall die Basis des Hintergrunds ist! Das sieht vielleicht nicht so schön aus, aber es soll hier nur als Beispiel dienen; der Zeilenabstand ist dabei normal.
• font-size: 3rem: Macht den ersten Buchstaben größer.
• background-color: rgba(14,90,14,.3): Fügt dem ersten Buchstaben einen Hintergrund hinzu.
• box-shadow: -5px 1px 5px -2px rgba(0,0,0,.75): Fügt dem Hintergrund des ersten Buchstabens einen Schatten hinzu.

4. Beispiel: Erster Buchstabe mit Border, Border-Radius, anderer Schriftart, Text-Shadow und gestalteter first-line

      
CSS Code
.chapter {
  background-color: snow;
}

.chapter-first-p::first-letter {
  margin: 0 5px 0 0;
  padding: 0 7px 0 0;
  vertical-align: baseline;
  font-family: 'MedievalSharp', cursive;
  font-size: 3em;
  color: #0E5A0E;
  border-color: #5DA75D;
  border-radius: 3px;
  border-style: double;
  border-width: 5px;
}

.chapter-first-p::first-line {
  font-size: 2em;
  line-height: 1.25;
  text-shadow: 2px 2px 1px rgba(14,90,14,0.6);
}
    

Anmerkungen zum CSS-Code

.chapter

• background-color: snow: Fügt die Hintergrundfarbe snow zu dem Artikel-Element hinzu, in das der Text eingefügt wird.

.chapter-first-p::first-letter

• margin: 0 5px 0 0: Schafft Platz zwischen dem ersten Buchstaben und den folgenden Buchstaben.
• padding: 0 7px 0 0: Gibt dem ersten Buchstaben mehr Raum.
• vertical-align: baseline: Der erste Buchstabe und die erste Zeile befinden sich auf der gleichen Ebene.
• font-family: 'MedievalSharp', cursive: Der erste Buchstabe wird in der Schriftart MedievalSharp (von Google fonts) kursiv dargestellt.
• font-size: 3rem: Macht den ersten Buchstaben größer.
• color: #0E5A0E: Färbt den ersten Buchstaben grün.
• border: Gestaltung des Randes des ersten Buchstabens mit Farbe, Radius, doppelter Linie und Breite.

.chapter-first-p::first-line

• font-size: 2rem: Macht den ersten Buchstaben größer.
• line-height: 1.25: Gibt der ersten Zeile mehr Raum.
• text-shadow: 2px 2px 1px rgba(14,90,14,0.6): Fügt dem Text der ersten Zeile und dem ersten Buchstaben einen Schatten hinzu.

5. Beispiel: Erster Buchstabe mit Border Image

      
CSS Code
.border-image::first-letter {
  margin: 0 .25rem 0 0;
  padding: .5rem 1rem;
  vertical-align: baseline;
  background: linear-gradient(0deg, rgba(229,229,229,1) 0%, rgba(191,191,191,1) 100%);
  border-style: solid; /* Chrome needs the border statements separated to display the border image */
  border-color: #4d4d4d;
  border-width: .000000001px;
  border-image-slice: 27 27 27 27;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAh1BMVEUAAAAeHh4iIiIoKCgyMjI0NDQ3NzdEREROTk5PT09fX19ubm5ycnJ1dXV3d3d4eHh6enp7e3t9fX1+fn6AgICBgYGCgoKDg4OEhISFhYWHh4eJiYmKioqLi4uMjIyNjY2Pj4+QkJCRkZGSkpKUlJSXl5eYmJiZmZmcnJyfn5+goKCkpKSlpaVgxfUqAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQflBQQENTfQWvfTAAABDUlEQVRoBe2ayQ6CYBCDfzdU3EBlURERFNze//lMgABOenIumtTTtP4zDd+5xvz7L81f3U8QsvvX13N83od+1KwL2fiqISyGu2SVnOojQqpOt8uB27cmg6czqywh23ea6RJk0WB0d5xDeUVIzeXO7sV1e9b0unCOVcin7DxUjbE9Luapt7GrK0KqTrfLt9xfrh/ZtnaEbN/ppq3nb9ywuSFk43MgARIgARIgARIgARIgARIgARIgARIgARIgARIgARIgARIgARIgARIgARL4YQKoEoE8xSegSgTyFBEGVSKQp8kwqBKBPE0IqkQgT5NhREOivIU8VYhBlQjkqVJQJQJ5qhCDKhHI06VwmwTePIIYTWY6LzwAAAAASUVORK5CYII=");
  font-size: 3em;
  font-weight: bold;
  color: #4d4d4d;
}

.border-image::first-line {
  line-height: 2.25;
}
    

Anmerkungen zum CSS-Code

In diesem Beispiel wird das PNG-Bild in base64 umgewandelt, so dass es inline verwendet werden kann.

.border-image::first-letter

• margin: 0 .25rem 0 0: Schafft Platz zwischen dem ersten Buchstaben und den folgenden Buchstaben.
• padding: .5rem 1rem: Gibt dem ersten Buchstaben mehr Raum.
• vertical-align: baseline: Der erste Buchstabe und die erste Zeile befinden sich auf der gleichen Ebene.
• background: linear-gradient(0deg, rgba(229,229,229,1) 0%, rgba(191,191,191,1) 100%): Fügt dem ersten Buchstaben einen Hintergrund (gradient) hinzu, der Farbverlauf geht vom unteren Ende zum oberen Rand und beginnt mit Hellgrau (#e5e5e5) und endet bei 100% mit Grau (#bfbfbf).
• border: Chrome benötigt die getrennten Border-Anweisungen, um das border-image anzuzeigen.
• border-width: .000000001px: Die Einstellung einer Mindestbreite ist für die Anzeige des border-image im Chrome-Browser erforderlich.
• border-image-slice: 27 27 27 27: Legt die Position des border-image fest - in diesem Fall sind es vier Schrauben.
• border-image-width: 20px 20px 20px 20px: Ergibt die gleiche Größe für alle vier "Seiten" des border-image.
• border-image-outset: 0px 0px 0px 0px: Hält das border-image in der border-box (erster Buchstabe).
• border-image-repeat: stretch stretch: Streckung des border-image in die Ecken des Rahmens (erster Buchstabe).
• border-image-source: url ( ... ): Dies ist die base64-Version des PNG-Bildes; Sie können es also bequem inline angeben.

.border-image::first-line

• line-height: 2.25: Gibt der ersten Zeile mehr Raum.