Punkt Dropcap med CSS s första och första bokstavselement
Det finns några CSS-selektörer eller egenskaper som jag tror sällan används i naturen, men de har faktiskt funnits sedan CSS1-dagarna. några är de inklusive :Första linjen och :första bokstaven pesudo element.
Hur man använder?
Dessa pseudoelement fungerar i princip som deras syskon -: före och: efter - och jag tror att de också är ganska enkla. De :första bokstaven kommer att rikta första bokstaven eller tecknet på ett valt element, detta pseudo-elementet används vanligen för att skapa en typografisk effekt som en dropplock. Så här är det gjort.
p: första bokstaven font-size: 50px;
Denna kod resulterar i följande presentation.
Några saker bör noteras, men denna effekt gäller endast när den första tecknen inte föregås av ett annat element, till exempel en bild. Dessutom, när vi har några av samma riktade element i rad, kommer alla även att påverkas.
Vidare, i termer av :Första linjen, detta pseudo-elementet kommer att rikta sig till den första raden av riktade element, visar det här exemplet nedan hur vi vet att den första raden i stycket är fet.
p: första linjen font-weight: bold;
Precis som tidigare kod av :första bokstaven, Detta kommer också att påverka alla de första raderna i punktelement som finns på sidan.
Så i reella fall när vi i allmänhet vill lägga till dropplock eller ändra första raden endast i första stycket behöver vi vara mer specifika - antingen genom att lägga till en extra klassattribut eller tillämpa dessa pseudoelement tillsammans med :förstfödde eller : Första i-typ väljare, som så.
p: första barnet: första bokstaven font-size: 50px; p: första barnet: första raden font-weight: bold;
Där går vi, det drabbade stycket är nu bara den första.
Pseudo-element på jobbet
Okej, låt oss nu försöka utforma en bättre titt på en paragraf genom att använda pseudo-element. Men innan vi börjar, behöver vi en speciell typsnitt för vår drop cap och här är mitt val: Hominis av Paul Lloyd. Då definierar vi en ny teckensfamilj i stilarket enligt följande.
@ font-face font-family: 'HominisNormal'; src: url ('teckensnitt / HOMINIS-webfont.eot'); src: url ('fonts / HOMINIS-webfont.eot? #iefix') format ('inbäddad opentype'), url ('fonter / HOMINIS-webfont.woff') format ('woff'), url HOMINIS-webfont.ttf ') format (' truetype '), url (' fonter / HOMINIS-webfont.svg # HominisNormal ') format (' svg '); typsnitt: normal; typsnittstyp: normal; Därefter ställer vi in standardfontsfamiljen för punkterna.
p färg: # 555; font-family: "Georgia", Times, Serif; linjehöjd: 24px;
I det här exemplet kommer vi att använda :förstfödde väljare för att rikta in den första stycket och tillämpa dekorativa stilar för att det ska se mer framträdande:
p: första barnet vaddering: 30px; gränsen till vänster: 5px fast # 7f7664; bakgrundsfärg: # f5f4f2; linjehöjd: 32px; boxskugga: 5px 5px 0px 0px rgba (127, 118, 100, 0.2); position: relativ;
Sedan lägger vi till en droppelock med :första bokstaven, förstora teckensnittstorleken och tilldela en ny typsnittfamilj till den;
p: första barnet: första bokstaven font-size: 72px; flyta till vänster; vaddering: 10px; höjd: 64px; font-family: "HominisNormal"; bakgrundsfärg: # 7F7664; marginal-höger: 10px; färg vit; gränsstråle: 5px; linjehöjd: 70px;
Vi kommer också att betona första raden med :Första linjen, såhär.
p: första barnet: första raden font-weight: bold; fontstorlek: 24px; färg: # 7f7664;
Slutligen vill vi lägga till ett dekorativt attribut till första stycket med en paperclip med :efter pseudo-elementet.
p: första barnet: efter background: url ("... /images/paper-clip.png") no-repeat scroll 0 0 transparent; innehåll: " "; display: inline-block; höjd: 100px; position: absolut; höger: -5px; topp: -35px; bredd: 100px; Det är all kod vi behöver, nu ska vår paragraf se mycket bättre ut;
Du kan också se live demo från länkarna nedan:
- Visa demo
- Hämta källa
Slutlig tanke
Som vi nämnde tidigare i detta inlägg, dessa pseudo-element, särskilt :första bokstaven och :Första linjen har inkluderats sedan CSS1, därför stöds de även även i Internet Explorer 8 tidigare.
Men så långt jag vet är de inte så omfattande implementerade i naturen. Så vi hoppas att denna handledning på något sätt kan inspirera dig att prova dessa CSS-funktioner på din webbplats.
