Paragraph Dropcap met CSS's eerste- en eersteletter-elementen
Er zijn een paar CSS-selectors of eigenschappen waarvan ik denk dat ze zelden in het wild worden gebruikt, maar ze bestaan eigenlijk al sinds de dagen van CSS1; sommige zijn inclusief de :Eerste lijn en :eerste brief pesudo-elementen.
Hoe te gebruiken?
Deze pseudo-elementen werken in principe hetzelfde als hun broers en zussen - vóór en: na - en ik denk dat ze ook vrij eenvoudig zijn. De :eerste brief zal de eerste letter of het eerste teken van een geselecteerd element targeten, dit pseudo-element wordt meestal gebruikt om een typografisch effect te creëren zoals een druppelstop. Hier is hoe het gedaan is.
p: eerste letter font-size: 50px;
Deze code resulteert in de volgende presentatie.
Een paar dingen moeten worden opgemerkt, maar dit effect is alleen van toepassing als het eerste teken niet wordt voorafgegaan door een ander element, bijvoorbeeld een afbeelding. Als we een aantal dezelfde getargete elementen op een rij hebben, worden ze ook allemaal beïnvloed.
Verder, in termen van de :Eerste lijn, deze pseudo-element zal de eerste regel van het doelelement targeten, dit voorbeeld hieronder laat zien hoe we de eerste regel van de alinea vetgedrukt maken.
p: eerste regel font-weight: bold;
Net als de vorige code van :eerste brief, dit is ook van invloed op alle eerste regels in alinea-elementen die zich op de pagina bevinden.
Dus in het echte geval, wanneer we in het algemeen drop-cap willen toevoegen of de eerste regel willen wijzigen enkel en alleen in de eerste alinea moeten we specifieker zijn - door een extra klassenattribuut toe te voegen of door deze pseudo-elementen toe te passen :eerstgeborene of : Eerste-van-type selector, zoals zo.
p: first-child: first-letter font-size: 50px; p: first-child: first-line font-weight: bold;
Daar gaan we, de betreffende paragraaf is nu slechts de eerste.
Pseudo-elementen op het werk
Oké, laten we nu proberen een beter uiterlijk van een alinea te ontwerpen door gebruik te maken van pseudo-elementen. Maar voordat we beginnen, hebben we een speciaal lettertype nodig voor onze dropcap en hier is mijn keuze: Hominis van Paul Lloyd. Vervolgens definiëren we een nieuwe lettertypefamilie in het stylesheet, als volgt.
@ font-face font-family: 'HominisNormal'; src: url ('fonts / HOMINIS-webfont.eot'); src: url ('fonts / HOMINIS-webfont.eot? #iefix') formaat ('embedded-opentype'), url ('fonts / HOMINIS-webfont.woff') formaat ('woff'), url ('fonts / HOMINIS-webfont.ttf ') formaat (' truetype '), url (' fonts / HOMINIS-webfont.svg # HominisNormal ') formaat (' svg '); font-gewicht: normaal; lettertype: normaal; Vervolgens stellen we de standaardlettertypefamilie voor de alinea's in.
p kleur: # 555; font-family: 'Georgia', Times, serif; regelhoogte: 24 px;
In dit voorbeeld gebruiken we de :eerstgeborene selector om de eerste alinea te targeten en decoratieve stijlen toe te passen om er prominenter uit te zien:
p: first-child padding: 30px; border-left: 5px solid # 7f7664; achtergrondkleur: # f5f4f2; regelhoogte: 32px; box-shadow: 5px 5px 0px 0px rgba (127, 118, 100, 0,2); positie: relatief;
Vervolgens voegen we een drop-cap toe met :eerste brief, vergroot de lettergrootte en wijs er een nieuwe lettertype aan toe;
p: first-child: first-letter font-size: 72px; zweven: links; opvulling: 10px; hoogte: 64 px; font-family: 'HominisNormal'; achtergrondkleur: # 7F7664; margin-right: 10px; kleur wit; grensradius: 5px; regelhoogte: 70 px;
We zullen ook de eerste regel benadrukken met :Eerste lijn, zoals zo.
p: first-child: first-line font-weight: bold; tekengrootte: 24 px; kleur: # 7f7664;
Ten slotte willen we een decoratief attribuut toevoegen aan de eerste alinea met een paperclip :na pseudo-element.
p: first-child: after background: url ("... /images/paper-clip.png") no-repeat scroll 0 0 transparent; inhoud: " "; weergave: inline-block; hoogte: 100 px; positie: absoluut; rechts: -5px; top: -35px; breedte: 100 px; Dat is alle code die we nodig hebben, nu zou onze paragraaf er veel beter uit moeten zien;
Je kunt de live demo ook bekijken via de onderstaande links:
- Demo bekijken
- Download de bron
Laatste gedachte
Zoals we eerder in dit bericht hebben vermeld, deze pseudo-elementen, met name de :eerste brief en :Eerste lijn is sinds CSS1 toegevoegd, vandaar dat ze ook al eerder in Internet Explorer 8 worden ondersteund.
Maar voor zover ik weet, zijn ze niet zo goed geïmplementeerd in het wild. We hopen dus dat deze tutorial je op een of andere manier zou kunnen inspireren om deze CSS-functies op je website te proberen.
