Beispiel:CSS initial-letter 1.html
<!doctype html> <html lang="de">
<head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css" />
<title>CSS initial-letter Beispiel</title>
<style>
.initial-3-zeilen::first-letter {
/* 3 Zeilen hoch und 3 Zeilen tief abgesenkt */
-webkit-initial-letter: 3;
initial-letter: 3;
}
.initial-3-zeilen-1-zeile-versenkt::first-letter {
/* 3 Zeilen hoch, aber nur bis zur 1. Zeile abgesenkt */
-webkit-initial-letter: 3 1;
initial-letter: 3 1;
}
/* nur für unterstützte Browser gestalten */
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
.initial-gestaltet::first-letter {
/* 3 Zeilen hoch, bis zur 5. Zeile abgesenkt */
-webkit-initial-letter: 3 5;
initial-letter: 3 5;
margin-right: 0.5rem; /* Abstand zum Fließtext */
font-weight: bold;
background: gold;
border: thick solid steelblue;
color: #c32e04;
padding: 1em; /* Initialen dürfen wie Boxen gestaltet werden. */
}
}
main {
max-width: 60em;
margin: auto;
padding: 1em; font-family: sans-serif;
}
.spalten {
columns: 3 15em;
column-gap: 2rem;
}
article {
font-family: serif;
break-inside: avoid;
}
h2 {
margin-top: 0;
font-family: monospace;
} </style>
</head>
<body>
<main>
Inhaltsverzeichnis
CSS initial-letter
<section class="spalten">
<article>
initial-letter: 3;
Neulich wollte Maja nur schnell den Abstand über einem Button anpassen. Sie öffnete die Datei, suchte nach margin-top und fand stattdessen zwölf Kommentare und eine Klasse namens .final-final-neu. Der Button stand da, etwas zu nah am Text, aber mit erstaunlicher Würde.
</article>
<article>
initial-letter: 3 1;
Während Maja noch überlegte, ob acht Pixel mutig oder fahrlässig seien, meldete sich der Projektleiter. Die Seite solle mehr Ruhe ausstrahlen, aber bitte ohne Platz zu verschwenden. Maja nickte, verschob den Button um ein Pixel und beobachtete, wie alle erleichtert wirkten.
</article>
<article>
gestaltetes Initial
Gegen Abend war der Button wieder an seiner ursprünglichen Stelle, hatte aber eine neue Farbe und einen Namen im Designsystem. Maja schloss den Laptop. Nicht, weil das Problem gelöst war, sondern weil niemand mehr genau wusste, worin es bestanden hatte.
</article> </section> </main>
</body>
</html>
