CSS/Tutorials/Initialen
Initialen (lateinisch initium ‚Anfang‘, ‚Beginn‘;) sind schmückende Anfangsbuchstaben, die als erste Buchstaben von Kapiteln oder Abschnitten verwendet werden.[1] Sie sind eine gute Möglichkeit, ansonsten eher lang(weilig) aussehende Texte aufzulockern.
Inhaltsverzeichnis
Funktionsweise[Bearbeiten]
Mit dem Pseudo-Element :first-letter können Sie den ersten Buchstaben eines Elements ansprechen.
Variante 1: invertierte Initiale[Bearbeiten]
Oft werden Initialen durch eine Umkehrung von Text- und Hintergrundfarbe (Farb-Inversion) gestaltet:
p {
color: #3983ab;
}
p:first-letter {
color: white;
background-color: #3983ab;
font-size: 300%;
}
Positionierung[Bearbeiten]
Die häufigsten Varianten sind eine Positionierung …
- bündig im Text
- mittig in der 1. Zeile und
- links neben dem Text
p::first-line {
line-height: 100%;
}
p::first-letter {
color: white;
background-color: #3983ab;
font-size: 300%;
font-weight: bold;
padding: 0.2em 0.1em;
margin: 0.2em 0.2em 0 0.1em;
border: 2px dashed white;
box-shadow: 0 0 0 .1em #3983ab;
float: left;
line-height: 1.5em;
}
p.mittig::first-letter {
line-height: 1.0em;
margin: -0.5em 0.2em 0 0.1em;
}
p.links::first-letter {
margin-left: -1.1em;
}
::first-line {line-height: 100%}
an die des Textes angepasst.Durch das float:left
wird die Initiale in den Text eingepasst. Die Zeilenhöhe des ::first-letter setzt sich aus der Höhe des Buchstabens, des Rands und des Paddings zusammen. Im zweiten Absatz wurde diese Zeilenhöhe verringert und ein negativer Margin nach oben gesetzt, damit die Initiale mittig dargestellt wird.
margin-left: -1.1em;
nach links verschoben.Letzte Raffinessen[Bearbeiten]
Am wirkungsvollsten wirken Initialen mit einer besonderen Schrifttype.
p::first:line {
line-height: 1em;
}
p:nth-of-type(1)::first-letter {
color: white;
background-color: #3983ab;
font-size: 300%;
float: left;
line-height: 1.5em;
font-weight: bold;
padding: 0.1em 0.3em 0.1em 0;
margin: 0.2em 0.2em 0 0;
border: 2px dashed white;
box-shadow: 0 0 0 .1em #3983ab;
font-family: "Edwardian Script ITC","Brush Script MT", cursive;
}
Grafiken als Initialen[Bearbeiten]
Sie können anstelle dieser CSS-Effekte auch eine externe Grafik einbinden. Zuerst würde mit der Methode des Image Replacement der erste Buchstabe unsichtbar gemacht und dann dem Anfangsbuchstaben eine SVG-Grafik als Hintergrundbild gegeben werden.
p::first-letter{
/* Image-Replacement */
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
}
p span{
display:inline-block;
float:left;
width: 98px;
height:106px;
margin-right: 0.3em;
/* Hintergrundbild */
background-image: url("http://wiki.selfhtml.org/images/7/77/Initiale_E.svg");
background-repeat: no-repeat;
background-size: contain;
}
<p>
<span>E</span>s war einmal eine kleine süße Dirne,
...
</p>
font: 0/0
(siehe Image-Replacement) keine Höhe mehr hat.
Das span-Element dient als Fläche für das Hintergrundbild, das mit background-size: contain;
passend skaliert wird.- Benutzer von Screen-Readern oder einer kontrastreichen Ansicht im Browser sehen weder die (Hintergrund-)Grafik noch den Text
- Jede externe Grafik benötigt einen Http-Request und verlangsamt so den Seitenaufbau.
- Wenn Sie den Text ändern, müssen Sie auch das CSS anpassen und gegebenenfalls eine neue Grafik erstellen.
Quellen[Bearbeiten]
Weblinks[Bearbeiten]
- css-tricks.com: Drop Caps
- honkiat.com: Paragraph Dropcap with CSS’s :first-line and :first-letter Elements