Kezdőbetű - CSS-trükkök

Anonim

initial-letter egy CSS tulajdonság, amely kiválasztja az elem első betűjét, ahol alkalmazzák, és meghatározza a betűk által elfoglalt sorok számát.

Valami ilyet láthatott a híroldalakon, ahol az első bekezdés első betűje nagyobb, mint a tartalom többi része.

A New York-i oldal stílusa a kezdő betű

A tartalom első betűjének megalkotásával kapcsolatos trükk egy kis feltörést igényelt, ahol a betűt becsomagolja a betűbe, és egy osztályt alkalmaz a stílusához:

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


Once upon a time in a faraway land…

Ez működik, de sokkal több HTML-jelölést jelent, mint amennyit szeretnénk, és feldarabolja a tartalmunkat. Ráadásul fájdalom, hogy bármikor manuálisan kell alkalmaznia az osztályt, amikor használni szeretné.

Hogy amennyiben initial-letterjön a képbe:

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


Once upon a time in a faraway land…

Ez tisztább! Egy másik megközelítés az, hogy a ::first-letterpsuedo-választóra alkalmazzuk:

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

Láttad azt? A initial-lettertulajdonság automatikusan kiszámítja mind a betűméretet, mind a sorok számát, amelyek a stilizált drop cap elkészítéséhez szükségesek! Szeretné, hogy pontosan 2, 3, 4 vagy több sort foglaljon el? Mondja el az ingatlannak, és ez elvégzi a súlyos emelést.

Az ingatlan megváltoztatása 1, 2 és 4 sor elfoglalására

Szintaxis és értékek

initial-letter: normal | ( );

initial-letter a következő értékeket fogadja el:

  • normal: Nem alkalmaz méretarányos hatást az első betűre. Ez hasznos lehet az érték alaphelyzetbe állításához, ahol az egyik öröklődhet a kaszkádból.
  • : Hány sort kell betöltenie a betűnek, ahol a negatív értékek nem engedélyezettek.
  • : Hány sornak kell süllyednie a betűnek, ahol a negatív értékek nem engedélyezettek. Ez akkor hasznos, ha a betűt alacsonyabban kell elhelyeznie, hogy megfeleljen a trükkös térközöknek, de ha nincs megadva, akkor a

Példák

Dobja a sapkát, a megemelt sapkát és a zárókupakot a Kezdő levél használatával

A kezdőbetű stilizálása felhasználható néhány divatos tipográfiai tervezési módszer elérésére. Felhívjuk figyelmét, hogy az alábbi példákat jelenleg csak a Safari támogatja.

A Drop Caps valószínűleg a legismertebb használati eset:

Lásd a toll kezdőbetűjét: Csepp sapka, Geoff Graham (@geoffgraham) a CodePen-en.

A Raised Caps egy másik példa:

Lásd a toll kezdőbetűjét: Geoff Graham (@geoffgraham) emelte a sapkát a CodePen-en.

A Block Caps visszatér a régi mesékhez:

Lásd a toll kezdőbetűjét: Block Cap, Geoff Graham (@geoffgraham) a CodePen-en.

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
Nem Nem Nem Nem TP *

Mobil / Tablet

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

Összefüggő

  • ::first-letter
  • Drop Caps részlet

Több információ

  • CSS Inline Layout modul 3. szint: A hivatalos specifikációk
  • Jen Simmons Labs: Demók és példák a felhasználási esetekre
  • Firefox jegy: Nyitott jegy a funkció támogatásához
  • Internet Explorer jegy: Nyissa meg a jegyet a funkció támogatásához