Paragraph Dropcap mit CSS-Elementen der ersten und ersten Buchstaben

Es gibt ein paar CSS-Selektoren oder -Eigenschaften, von denen ich glaube, dass sie selten in der freien Natur verwendet werden, aber tatsächlich existieren sie seit den Tagen von CSS1; einige davon sind die :erste Linie und :erster Brief Pesudo-Elemente.

Wie benutzt man?

Diese Pseudo-Elemente funktionieren im Wesentlichen ähnlich wie ihre Geschwister - Vorher und Nachher - und ich denke, dass sie auch recht unkompliziert sind. Das :erster Brief Ziel wird der erste Buchstabe oder das Zeichen eines ausgewählten Elements sein Pseudoelement wird häufig verwendet, um einen typografischen Effekt wie eine Kappe zu erzeugen. So wird es gemacht.

 p: Anfangsbuchstabe Schriftgröße: 50px;  

Dieser Code führt zur folgenden Darstellung.

Einige Dinge sollten jedoch beachtet werden. Dieser Effekt wird jedoch nur angewendet, wenn dem ersten Zeichen kein anderes Element, z. B. ein Bild, vorangestellt ist. Wenn wir einige der gleichen Zielelemente in einer Reihe haben, sind auch alle davon betroffen.

Weitere in Bezug auf die :erste Linie, diese Pseudoelement zielt auf die erste Zeile des anvisierten Elements, dieses Beispiel zeigt, wie die erste Absatzzeile fett dargestellt wird.

 p: erste Zeile font-weight: fett;  

Wie der vorherige Code von :erster Brief, Dies wirkt sich auch auf alle ersten Zeilen in Absatzelementen auf der Seite aus.

In realen Fällen also, wenn wir im Allgemeinen eine Drop-Cap hinzufügen oder die erste Zeile ändern möchten nur Im ersten Absatz müssen wir genauer sein - entweder durch Hinzufügen eines zusätzlichen Klassenattributs oder durch Anwenden dieser Pseudoelemente :erstes Kind oder : Ersttyp Wahlschalter wie.

 p: first-child: Anfangsbuchstabe Schriftgröße: 50px;  p: first-child: erste Zeile font-weight: fett;  

Nun geht es los, der betroffene Absatz ist jetzt nur der erste.

Pseudo-Elemente bei der Arbeit

In Ordnung, lassen Sie uns nun versuchen, einen Absatz besser zu gestalten, indem Sie Pseudo-Elemente verwenden. Aber bevor wir anfangen, brauchen wir eine spezielle Schriftart für unsere Mütze. Hier ist meine Wahl: Hominis von Paul Lloyd. Dann definieren wir eine neue Schriftfamilie im Stylesheet wie folgt.

 @ font-face font-family: 'HominisNormal'; src: url ('fonts / HOMINIS-webfont.eot'); src: url ('fonts / HOMINIS-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / HOMINIS-webfont.woff') format ('woff'), url ('fonts / HOMINIS-webfont.ttf ') format (' truetype '), url (' fonts / HOMINIS-webfont.svg # HominisNormal ') format (' svg '); Schriftgewicht: normal; font-style: normal;  

Als Nächstes legen wir die Standardschriftfamilie für die Absätze fest.

 p color: # 555; Schriftfamilie: 'Georgia', Times, Serife; Zeilenhöhe: 24px;  

In diesem Beispiel verwenden wir die :erstes Kind Selektor, um den ersten Absatz anzuvisieren und dekorative Stile anzuwenden, damit er prominenter aussieht:

 p: first-child padding: 30px; Rahmen links: 5px fest # 7f7664; Hintergrundfarbe: # f5f4f2; Zeilenhöhe: 32px; Box-Schatten: 5px 5px 0px 0px rgba (127, 118, 100, 0,2); Position: relativ;  

Dann fügen wir eine Verschlusskappe hinzu :erster Brief, vergrößern Sie die Schriftgröße und weisen Sie ihr eine neue Schriftfamilie zu;

 p: first-child: Anfangsbuchstabe Schriftgröße: 72px; Schwimmer: links; Polsterung: 10px; Höhe: 64px; Schriftfamilie: 'HominisNormal'; Hintergrundfarbe: # 7F7664; Rand rechts: 10px; Farbe weiß; Grenzradius: 5px; Zeilenhöhe: 70px;  

Wir werden auch die erste Zeile mit betonen :erste Linie, wie so.

 p: first-child: erste Zeile font-weight: fett; Schriftgröße: 24px; Farbe: # 7f7664;  

Zuletzt möchten wir dem ersten Absatz ein dekoratives Attribut mit einer Büroklammer hinzufügen :nach dem Pseudoelement.

 p: first-child: after background: url ("… /images/paper-clip.png") no-repeat scroll 0 0 transparent; Inhalt: ""; Anzeige: Inline-Block; Höhe: 100px; Position: absolut; rechts: -5px; oben: -35px; Breite: 100px;  

Das ist alles, was wir brauchen, jetzt sollte unser Absatz viel besser aussehen.

Sie können die Live-Demo auch über die folgenden Links sehen:

• Demo anzeigen
• Quelle herunterladen

Letzter Gedanke

Wie bereits erwähnt, sind diese Pseudoelemente, insbesondere die :erster Brief und :erste Linie ist seit CSS1 enthalten, daher werden sie auch in Internet Explorer 8 früher unterstützt.

Soweit ich weiß, werden sie in der freien Natur jedoch nicht so weitgehend umgesetzt. Wir hoffen, dass dieses Tutorial Sie irgendwie dazu anregen kann, diese CSS-Funktionen auf Ihrer Website auszuprobieren.