Erfahren Sie, wie Sie es verwenden CSS erschaffenschick Anfangsbuchstaben für Ihre Absätze. Es gibt sogar eine einfache Bildaustauschtechnik, um ein grafisches Bild für Ihre anfängliche Kappe zu verwenden.
Grundstile von Initial Caps
Es gibt drei grundlegende Arten von Anfangsbuchstaben in Dokumenten:
- Angehoben - am häufigsten, wobei der erste Buchstabe größer ist und sich in derselben Zeile wie der aktuelle Text befindet.
- Fallen gelassen - auch ziemlich häufig, wobei der erste Buchstabe größer ist und unter die erste Textzeile fällt. Der folgende Text schwebt dann darum herum.
- Benachbart - wobei der erste Buchstabe in einer Spalte neben dem Rest des Textes steht. Dies ist häufiger im Print- als im Webdesign der Fall.
Initial Caps oder Drop Caps sind sehr bekannt. Sie sind eine großartige Möglichkeit, ansonsten lange und langweilige Textspannen zu verkleiden. Und mit der CSS-Eigenschaft: first-letter können Sie ganz einfach definieren, wie Sie Ihre Anfangsbuchstaben schöner gestalten.
Erstellen Sie eine einfache Anfangskappe
Alles, was Sie tun müssen, um eine einfache, erhöhte Anfangskappe zu erstellen, ist, den ersten Buchstaben Ihres Absatzes mit dem Pseudo-Element Anfangsbuchstabe zu vergrößern:
p: Anfangsbuchstabe { Schriftgröße: 3em; }
Aber viele Browser Sehen Sie, dass der erste Buchstabe größer ist als der Rest des Textes in der Zeile, also machen sie den Anfang gleich dem, was für diesen ersten Buchstaben sinnvoll wäre, nicht den Rest der Zeile. Glücklicherweise lässt sich dies leicht mit dem Pseudoelement der ersten Zeile und der Eigenschaft line-height beheben:
p: Anfangsbuchstabe { Schriftgröße: 3em; }
p: erste Zeile { Zeilenhöhe: 1em; }
Spielen Sie mit der Zeilenhöhe in Ihrem Dokument, bis Sie die richtige Größe für Ihren Text gefunden haben.
Spielen Sie mit Ihrem anfänglichen Cap
Sobald Sie verstanden haben, wie man eine erste Mütze kreiert, können Sie sie in schicke Kleidung kleiden, um sie hervorzuheben. Spielen Sie mit Farben, Hintergrundfarben, Rändern oder was auch immer Ihnen gefällt. Ein ziemlich einfacher Stil besteht darin, die Farben Ihrer Schrift und Hintergrundfarbe nur für den ersten Buchstaben umzukehren:
p: Anfangsbuchstabe {
Schriftgröße: 300%;
Hintergrundfarbe: #000;
Farbe: #fff;
}
p: erste Zeile { Zeilenhöhe: 100 %; }
Ein weiterer Trick besteht darin, die erste Zeile zu zentrieren. Dies kann bei CSS schwierig sein, da die Mitte der Textzeile bei flexiblem Layout unterschiedlich sein kann. Aber wenn Sie mit den Werten herumspielen, können Sie Ihre erste Zeile so weit einrücken, dass der erste Buchstabe in der Mitte erscheint. Spielen Sie einfach mit dem Prozentsatz am Texteinzug des Absatzes, bis er richtig aussieht:
p: Anfangsbuchstabe {
Schriftgröße: 300%;
Hintergrundfarbe: #000;
Farbe: #fff;
}
p: erste Zeile { Zeilenhöhe: 100 %; }
p { Texteinzug: 45%; }
Benachbarte Initial Caps sind schwer mit CSS
Angrenzende Anfangsbuchstaben können mit CSS schwierig sein, da die verschiedenen Browser die Schriftarten unterschiedlich darstellen. Die Idee hinter dem Erstellen einer angrenzenden Kappe in CSS besteht darin, die text-indent-Eigenschaft in der ersten Zeile zu verwenden, um einen negativen Wert (nach links) herauszuschieben. Sie müssen auch den linken Rand dieses Absatzes um einen gewissen Betrag ändern. Spielen Sie mit diesen Zahlen, bis der Absatz gut aussieht.
p {
Texteinzug: -2.5em;
Rand links: 3em;
}
p: Anfangsbuchstabe { Schriftgröße: 3em; }
p: erste Zeile { Zeilenhöhe: 100 %; }
Wirklich schicke Initial Caps bekommen
Der beste Weg, eine ausgefallene Anfangskappe zu erstellen, besteht darin, die Schriftart in eine dekorativere Schriftfamilie zu ändern. Wenn Sie a. verwenden Reihe von Schriftarten gefolgt von einem generische Schriftart, hilft es sicherzustellen, dass Ihre anfängliche Obergrenze gut angezeigt wird, damit Ihre Kunden sie sehen können, ohne in Zugänglichkeits- und Benutzerfreundlichkeitsprobleme zu geraten.
p: Anfangsbuchstabe {
Schriftgröße: 3em;
Schriftfamilie: "Edwardian Script ITC", "Brush Script MT", Kursiv;
}
p: erste Zeile { Zeilenhöhe: 100 %; }
Und wie üblich können Sie all diese Vorschläge zusammenstellen, um eine anfängliche Obergrenze zu erstellen, die Ihrem Absatz einen Stil verleiht.
Verwenden einer grafischen Anfangskappe
Wenn Ihnen nach all dem das Aussehen Ihrer Anfangsbuchstaben auf der Seite immer noch nicht gefällt, können Sie auf Grafiken zurückgreifen, um genau den gewünschten Effekt zu erzielen. Bevor Sie sich jedoch entscheiden, direkt zur Grafik zu wechseln, sollten Sie sich der Nachteile dieser Methode bewusst sein:
- Kunden ohne Bilder sehen die anfängliche Obergrenze nicht und sehen möglicherweise nicht den versteckten Text, den das Bild ersetzt. Dies kann dazu führen, dass der Absatz unzugänglich oder bestenfalls schwer zu lesen ist.
- Bilder tragen immer zur Downloadzeit einer Seite bei. Wenn Sie viele anfängliche Obergrenzen haben, können Sie die Downloadzeit für etwas erhöhen, das viele Leute als unbedeutend empfinden.
- Einige Browser zeigen sowohl den versteckten ersten Buchstaben als auch das Bild an, was den Absatztext seltsam aussehen lassen kann.
- Diese Option ist sehr schwer zu automatisieren, da Sie den Anfangsbuchstaben genau kennen müssen, um die richtige Grafik zu verwenden. Daher müssen Sie jedes Mal, wenn der Absatz bearbeitet wird, möglicherweise eine neue Grafik erstellen.
Zuerst müssen Sie die Grafik des ersten Buchstabens erstellen. Wir haben Photoshop verwendet, um den Buchstaben L mit der Schriftart "Edwardian Script ITC" zu erstellen. Wir haben es riesig gemacht – 300pt groß. Wir haben dann das Bild um den Buchstaben auf das absolute Minimum beschnitten und die Bildbreite und -höhe notiert.
Dann haben wir für unseren Absatz eine Klasse "capL" erstellt. Hier definieren wir das zu verwendende Bild, den Zeilenabstand (Linienhöhe) und so weiter.
Sie müssen die Bildbreite und -höhe verwenden, um den Texteinzug und den oberen Rand des Absatzes festzulegen. Für unser L-Bild benötigten wir 95px Einzug und 72px Auffüllung.
p.capL {
Zeilenhöhe: 1em;
Hintergrundbild: URL (capL.gif);
Hintergrundwiederholung: keine Wiederholung;
Texteinzug: 95px;
Polsterung-Oberseite: 72px;
}
Aber das ist nicht alles. Wenn Sie es dort belassen, wird der erste Buchstabe im Absatz dupliziert, zuerst mit der Grafik, dann im Text. Also haben wir eine Spanne um dieses erste Element mit der Klasse "initial" hinzugefügt und den Browser angewiesen, diesen Buchstaben nicht anzuzeigen:
span.initial { Anzeige: keine; }
Die Grafik wird dann korrekt angezeigt. Sie können mit dem Texteinzug im Absatz spielen, um den Text genau an den Buchstaben zu schmiegen, wie auch immer Sie ihn anzeigen möchten.