Lesefortschritt:

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

25. April 2021 | CSS-Stylesheet, Word­Press

Trick # 95 | Dieser Beitrag beinhaltet 458 Wörter. – Geschätzte Lesezeit: 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

Word­Press-URL fix hinterlegen

Die Word­Press-URL lässt sich zwar im Backend festlegen – dort jedoch auch (versehentlich) überschreiben. Dann kann es haarig werden und ein Krampf, bis man wieder Zugriff aufs Word­Press-Backend hat. Fix festlegen lässt sich die URL aber auch in ...
Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.