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
Werbung
