Alkukirjain - CSS-temppuja

Anonim

initial-letter on CSS-ominaisuus, joka valitsee alkion ensimmäisen kirjaimen, jossa sitä käytetään, ja määrittää rivien määrän, jonka kirjaimella on.

Olet ehkä nähnyt jotain tällaista uutissivustoilla, joissa alkukappaleen ensimmäinen kirjain on suurempi kuin muu sisältö.

New Yorkerin sivusto muotoilee alkukirjaimen

Ensimmäisen sisältökirjaimen muotoilussa käytetty temppu otti pienen hakkeroinnin, jossa käärit kirjaimen a-kirjaimeen ja käytät luokkaa sen muotoiluun:

/* Style that first letter! */ .first-letter ( font-size: 35px; line-height: 70px; )


Once upon a time in a faraway land…

Se toimii, mutta se on enemmän HTML-merkintöjä kuin haluamme ja hajottaa sisältöämme. Lisäksi on tuskaa joutua soveltamaan kyseistä luokkaa manuaalisesti aina, kun haluat käyttää sitä.

Se missä initial-lettertulee:

/* Style that first letter! */ .subhead ( initial-letter: 2; )


Once upon a time in a faraway land…

Se on puhtaampaa! Toinen lähestymistapa on soveltaa sitä ::first-letterpsuedo-valitsimeen sen sijaan:

/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )

Näitkö tuon? initial-letterOminaisuus laskee automaattisesti sekä fonttikokoa ja rivien tarvitaan luomaan meidän tyylitelty anfangi! Haluatko, että se vie täsmälleen 2, 3, 4 tai enemmän riviä? Kerro kiinteistölle, niin se tekee raskaan nostamisen.

Kiinteistön vaihtaminen viemään 1, 2 ja 4 riviä

Syntaksi ja arvot

initial-letter: normal | ( );

initial-letter hyväksyy seuraavat arvot:

  • normal: Ei käytä skaalausvaikutusta ensimmäiseen kirjaimeen. Tämä voi olla hyödyllistä nollattaessa arvon, jos arvo voidaan periä kaskadista.
  • : Kuinka monta riviä kirjaimen tulisi olla siellä, missä negatiivisia arvoja ei sallita.
  • : Kuinka monta riviä kirjaimen pitäisi upota, jos negatiivisia arvoja ei sallita. Tämä on kätevää, jos kirjain on asetettava alemmaksi, jotta se mahtuisi hankaliin välilyönteihin, mutta jos sitä ei ole määritetty, se vie arvon

Esimerkkejä

Pudota korkki, korotettu korkki ja estokorkki alkukirjaimella

Alkukirjaimen muotoilulla voidaan saavuttaa hienoja typografisia suunnittelumenetelmiä. Huomaa, että vain Safari tukee tällä hetkellä seuraavia esimerkkejä.

Drop Caps ovat todennäköisesti tunnetuin käyttötapaus:

Katso kynän alkukirjain: Drop Cap, kirjoittanut Geoff Graham (@geoffgraham) CodePenistä.

Korotetut korkit ovat toinen esimerkki:

Katso kynän alkukirjain: Geoff Graham (@geoffgraham) korotti korkki CodePenillä.

Estä Caps harkin takaisin vanhoja satuja:

Katso kynän alkukirjain: Block Cap, kirjoittanut Geoff Graham (@geoffgraham) CodePenistä.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi Firefox IE Reuna Safari
Ei Ei Ei Ei TP *

Matkapuhelin / tabletti

Android Chrome Android Firefox Android iOS Safari
Ei Ei Ei 14,0–14,4 *

Liittyvät

  • ::first-letter
  • Drop Caps -katkelma

Lisää tietoa

  • CSS Inline Layout Module Level 3: Viralliset spesifikaatiot
  • Jen Simmons Labs: Demot ja esimerkkejä käyttötapauksista
  • Firefox-lippu: Avoin lippu ominaisuuden tukemiseksi
  • Internet Explorer -lippu: Avaa lippu ominaisuuden tukemiseksi