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

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

cssselektor {
  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í:

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

css#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ý:

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

css#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í:

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

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

Результат:

Viz také

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