Kapice - CSS-trikovi

Anonim

Pristupačan način

Najbolje je pogledati Ethanov petominutni video, a zatim se osvrnuti na ovo:

Način više preglednika (dodatni markup)

Samo zamotajte prvi znak odlomka u raspon, a zatim ga ciljajte CSS-om i stilom.


L orem ipsum dolor sit amet, consectetur adipiscing elit.

.firstcharacter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )

Način CSS3 (bez dodatnih oznaka)

Ciljajte prvi znak prvog odlomka pomoću selektora pseudo klase. Nisu potrebne dodatne oznake, ali niti podrška za IE <9.


Just a normal sentence.

p:first-child:first-letter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )

initial-letternačin

Pomoću početnog slova stvorite kapicu

Podrška preglednika za initial-letterprilično je oskudna u vrijeme pisanja ovog teksta, ali može se koristiti za izračunavanje broja redaka koje bi trebalo zauzimati preskočeno slovo i veličine fonta, umjesto da to radite sami.

p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )

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 *