Početno slovo - CSS-trikovi

Anonim

initial-letter je CSS svojstvo koje odabire prvo slovo elementa u kojem je primijenjeno i određuje broj redaka koje slovo zauzima.

Možda ste vidjeli nešto slično na web mjestima s vijestima, gdje je prvo slovo vodećeg odlomka veće od ostatka sadržaja.

Web stranica New Yorkera stilizira početno slovo

Trik s oblikovanjem prvog slova sadržaja trebao je malo provaliti kada slovo umotate u a i primijenite klasu da biste ga oblikovali:

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


Once upon a time in a faraway land…

To djeluje, ali to je više HTML označavanja nego što želimo i razbija naš sadržaj. Osim toga, bol je što morate tu nastavu ručno primijeniti kad god je želite koristiti.

To gdje initial-letterdolazi:

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


Once upon a time in a faraway land…

To je čišće! Drugi je pristup primijeniti ga na ::first-letterpsuedo-selektor umjesto:

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

Jesi li vidio to? initial-letterEntitet automatski izračunava i na veličinu fonta i broj linija potrebnih za stvaranje naše stilizirane drop cap! Želite li da zauzme točno 2, 3, 4 ili više redaka? Recite vlasništvu i učinit će teški posao.

Promjena svojstva da zauzme 1, 2 i 4 redaka

Sintaksa i vrijednosti

initial-letter: normal | ( );

initial-letter prihvaća sljedeće vrijednosti:

  • normal: Ne primjenjuje efekt skaliranja na prvo slovo. To može biti korisno za resetiranje vrijednosti u kojoj se može naslijediti od kaskade.
  • : Koliko redaka slovo treba zauzeti tamo gdje negativne vrijednosti nisu dopuštene.
  • : Koliko redaka bi slovo trebalo potonuti tamo gdje negativne vrijednosti nisu dopuštene. Ovo je zgodno ako slovo trebate postaviti niže kako biste udovoljili škakljivim problemima s razmakom, ali ako nije navedeno, uzima vrijednost

Primjeri

Ispustite kapu, podignutu kapu i blok kapicu pomoću početnog slova

Stiliziranje početnog slova može se koristiti za postizanje nekih otmjenih metoda tipografskog dizajna. Napominjemo da sljedeće primjere trenutno podržava samo Safari.

Kapice su vjerojatno najpoznatiji slučaj korištenja:

Pogledajte početno slovo olovke: Kapica Geffa Grahama (@geoffgraham) na CodePenu.

Podignuti kapice su još jedan primjer:

Pogledajte početno slovo olovke: Podignuta kapa, Geoff Graham (@geoffgraham) na CodePenu.

Block Caps vraćeni u stare bajke:

Pogledajte početno slovo olovke: Block Cap Geoff Graham (@geoffgraham) na CodePenu.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
Ne Ne Ne Ne TP *

Mobitel / tablet

Android Chrome Android Firefox Android iOS Safari
Ne Ne Ne 14,0-14,4 *

Povezano

  • ::first-letter
  • Isječak Drop Caps

Više informacija

  • CSS Inline Layout Modul Razina 3: Službene specifikacije
  • Laboratoriji Jen Simmons: Demo i primjeri slučajeva upotrebe
  • Ulaznica za Firefox: otvorena ulaznica za podršku značajke
  • Ulaznica za Internet Explorer: otvorena ulaznica za podršku značajke