Afsnit Dropcap med CSS's første linje og første bogstav Elementer

Der er et par CSS-selektorer eller egenskaber, som jeg tror sjældent anvendes i naturen, men de har faktisk eksisteret siden CSS1-dage; nogle af dem er inklusive :første linje og : Første bogstaver pesudo-elementer.

Sådan bruges?

Disse pseudoelementer fungerer i lighed med deres søskende - før og efter - og jeg tror også, de er ret ligefrem. Det : Første bogstaver vil målrette det første bogstav eller tegn på et valgt element, dette pseudo-element bruges almindeligvis til at skabe en typografisk effekt som en drop cap. Her er hvordan det er gjort.

 p: første bogstaver font-size: 50px;  

Denne kode resulterer i følgende præsentation.

Et par ting skal bemærkes, men denne effekt gælder kun, når det første tegn ikke foregår af et andet element, for eksempel et billede. Når vi også har nogle af de samme målrettede elementer i træk, vil alle også blive påvirket.

Yderligere, hvad angår :første linje, dette pseudo-element vil målrette mod den første linje med målrettet element, viser dette eksempel nedenfor, hvordan vi drister den første linje i stykket.

 p: first-line font-weight: bold;  

Ligesom den tidligere kode af : Første bogstaver, Dette vil også påvirke alle de første linjer i afsnitelementer, der findes på siden.

Så i virkelige tilfælde, når vi generelt ønsker at tilføje drop cap eller ændre første linje kun i første afsnit skal vi være mere specifikke - enten ved at tilføje en ekstra klasseattribut eller anvende disse pseudoelementer sammen med : Første barn eller : Første af typen vælger, som sådan.

 p: første barn: første bogstaver font-size: 50px;  p: første barn: første linje font-weight: bold;  

Der går vi, det berørte afsnit er nu kun den første.

Pseudo-Elements at Work

Okay, lad os nu prøve at designe et bedre stykke af et afsnit ved at bruge pseudo-elementer. Men før vi begynder har vi brug for en special skrifttype til vores drop cap og her er mit valg: Hominis af Paul Lloyd. Så definerer vi en ny skrifttypefamilie i stilarket som følger.

 @ font-face font-family: 'HominisNormal'; src: url ('skrifttyper / HOMINIS-webfont.eot'); src: url ('fonts / HOMINIS-webfont.eot? #iefix') format ('embedded-opentype'), url ('skrifttyper / HOMINIS-webfont.woff') format ('woff'), url HOMINIS-webfont.ttf ') format (' truetype '), url (' skrifttyper / HOMINIS-webfont.svg # HominisNormal ') format (' svg '); skrifttype-vægt: normal; skrifttypestil: normal;  

Dernæst sætter vi standard skrifttypefamilien for afsnitene.

 p farve: # 555; font-familie: 'Georgia', Times, Serif; linjehøjde: 24px;  

I dette eksempel bruger vi : Første barn vælger til at målrette mod første afsnit og anvende dekorative stilarter til at se mere fremtrædende ud:

 p: første barn polstring: 30px; grænse-venstre: 5px fast # 7f7664; baggrundsfarve: # f5f4f2; linjens højde: 32px; box-skygge: 5px 5px 0px 0px rgba (127, 118, 100, 0.2); stilling: relativ;  

Derefter tilføjer vi en drop cap med : Første bogstaver, forstørr skriftstørrelsen samt tildele en ny skrifttypefamilien til den;

 p: første barn: første bogstaver font-size: 72px; flyde: venstre; polstring: 10px; højde: 64px; font-familie: 'HominisNormal'; baggrundsfarve: # 7F7664; margen-højre: 10px; farve: hvid; grænse-radius: 5px; linjehøjde: 70px;  

Vi vil også understrege den første linje med :første linje, ligesom.

 p: første barn: første linje font-weight: bold; skrifttypestørrelse: 24px; farve: # 7f7664;  

Endelig vil vi tilføje en dekorativ attribut til første afsnit med en papirclip ved hjælp af :efter pseudo-element.

 p: første barn: efter baggrund: url ("... /images/paper-clip.png") no-repeat scroll 0 0 transparent; indhold: " "; display: inline-block; højde: 100px; position: absolut; højre: -5px; top: -35px; bredde: 100px;  

Det er al den kode, vi har brug for, nu skal vores afsnit se meget bedre ud;

Du kan også se live demoen fra nedenstående links:

• Se Demo
• Download kilde

Endelig tanke

Som vi tidligere nævnte i dette indlæg, disse pseudo-elementer, specifikt den : Første bogstaver og :første linje er blevet medtaget siden CSS1, derfor støttes de også selv i Internet Explorer 8 tidligere.

Men så vidt jeg ved, er de ikke så stort set implementeret i naturen. Så vi håber, at denne vejledning på en eller anden måde kan inspirere dig til at prøve disse CSS-funktioner på din hjemmeside.