Klasické iniciály pomocou CSS

Trochu som sa pohral s CSS a podarilo sa mi vytvoriť celkom pekné klasické iniciály fungujúce aj v IE bez hackov a zdá sa, že nemajú problémy so zväčšovaním textu.

Je to celkom jednoduché, finta spočíva v obliekaní prvého písmena. Určite niesom prvý koho tu už napadlo, ale ešte som to nevidel zrealizované. Kód je vlastne dosť jednoduchý:

p:first-letter {
	font-size: 2.4em;
	font-weight: bold;
	text-indent: 1em;
	float: left;
	line-height: 1em;
	padding-right: 0.15em
}

V Opere to funguje krásne (testoval som na 8.51), vo Firefoxe iniciála trochu vyčnieva z riadku, ale výsledok je uspokojivý. Explorer je treba prepnúť do quirk režimu, takže pred doctype treba pripísať xml deklaráciu. Doctype bude vyzerať nasledovne:


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Celé si to môžete pozrieť v akcii na príklade. Testoval som na: Opera 8.51, Firefox 1.502 a 2, IE 6 a 5.5 (všade funguje).

Aktualizácia (10. augusta 2007)

V súvislosti s článkom Iniciála v typografii a webdesigne na tomto blogu som vytvoril aktualizované dva príklady, viac v spomínanom článku.

Napíš prvý komentár k tomuto článku

your_ip_is_blacklisted_by sbl.spamhaus.org