Vlastnost text-shadow

Vlastnost text-shadow nastavuje stín textu. Jako hodnota přijímá vlastnost 4 parametry, oddělené mezerami, nebo klíčové slovo none, které stín úplně zruší (toto je výchozí hodnota).

Syntaxe

selektor {
	text-shadow: posun_po_x posun_po_y rozostření barva;
}

selektor {
	text-shadow: none;
}

Parametry

Parametr	Popis
posun po x	Nastavuje posun stínu podél osy X. Kladná hodnota posouvá doprava, záporná - doleva.
posun po y	Nastavuje posun stínu podél osy Y. Kladná hodnota posouvá dolů, záporná - nahoru.
rozostření	Nastavuje rozostření stínu. Čím větší hodnota - tím více rozostřený stín bude. Nepovinný parametr. Pokud není zadán - stín bude ostrý.
barva	Nastavuje barvu stínu v libovolných jednotkách pro barvu. Nepovinný parametr. Pokud není zadán - barva stínu se shoduje s barvou textu.

Posuny podél os a rozostření se zadávají v libovolných jednotkách pro velikosti, kromě procent.

Příklad

Posuneme stín dolů a doleva a přidáme malé rozostření:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 5px 5px 3px black;
}

Příklad . Ostrý stín

Nyní uděláme stín červené barvy, posuneme ho dolů a doleva, ale odstraníme rozostření - stín bude ostrý:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 10px 10px red;
}

Příklad . Rovnoměrný stín

Nyní stín není posunutý, ale je k němu přidáno rozostření:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 0px 0px 3px black;
}

Viz také

vlastnost box-shadow,
která nastavuje stín kontejneru