Beiträge und Seiten mit Initialen (Drop Caps) gestalten

25. April 2021 | CSS-Stylesheet, WordPress

Geschätzte Lesezeit für diesen Beitrag: ca. 3 Minuten.

Besonders in journalistischen Webtexten sind sie hin und wieder anzutreffen: Die Initialen – auch Drop Caps genannt – welche der angezeigten Seite einen Schimmer von Print einhauchen. Solche Initialen können Sie ganz einfach selber erstellen und automatisch anzeigen lassen. Wir zeigen Ihnen wie.

Wir machen gleich ein Beispiel: Dieser Absatz wird von einer Initiale begonnen, welche Sie mit wenig CSS hinkriegen. Der weitere Text wird um diese Initiale herum dargestellt. Den Code, welchen Sie dafür benötigen, finden Sie nachfolgend. Er gehört in das CSS-Stylesheet Ihrer Website. Dieses erreichen Sie unter Design/Customizer/zusätzliches CSS:

p:first-of-type:first-letter{ 
  color: #000095;
  font-weight: 700;
  font-size: 300%;
  font-stretch: condensed;
  line-height: 1;
  float: left;
  padding-right: .125em;
}
@-moz-document url-prefix() {
  p:first-of-type:first-letter{
    margin-top: .15em;
  }
}

Es sind weitere Spielformen denkbar. Wenn Sie z.B. die erste Zeile eines Abschnitts speziell auszeichnen möchten, benötigen Sie dafür nur eine kleine Anpassung des obigen Codes:

p:first-of-type:first-line{ 
  color: #000095;
  font-weight: 700;
  font-size: 300%;
  font-stretch: condensed;
  line-height: 1.2;
  float: left;
  padding-right: .125em;
}
@-moz-document url-prefix() {
  p:first-of-type:first-line{
    margin-top: .15em;
  }
}

Das ergibt dann dieses Ergebnis. Sie sehen: Wir haben in Zeile 6 die Zeilen-Höhe (line-height) ein wenig erhöht und in den Zeilen 1 und 11 den Selektor «first-letter» mit «first-line» ersetzt; schon sieht das Ergebnis so aus wie in diesem Abschnitt beispielhaft dargestellt.

 

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.









Vielen Dank.

Pin It on Pinterest

Share This