Vlastnosť text-shadow

Vlastnosť text-shadow nastavuje tieň textu. Ako hodnota prijíma 4 parametre, oddelené medzerami, alebo kľúčové slovo none, ktoré tieň úplne zruší (toto je predvolená hodnota).

Syntax

cssselektor {
  text-shadow: posun_po_x posun_po_y rozostrenie farba;
}

cssselektor {
  text-shadow: none;
}

Parametre

Parameter	Popis
posun po x	Nastavuje posun tieňa po osi X. Kladná hodnota posúva doprava, záporná - doľava.
posun po y	Nastavuje posun tieňa po osi Y. Kladná hodnota posúva nadol, záporná - nahor.
rozostrenie	Nastavuje rozostrenie tieňa. Čím väčšia hodnota - tým rozostrenejší bude tieň. Voliteľný parameter. Ak nie je zadaný - tieň bude ostrý.
farba	Nastavuje farbu tieňa v ľubovoľných jednotkách pre farbu. Voliteľný parameter. Ak nie je zadaný - farba tieňa bude rovnaká ako farba textu.

Posuny po osiach a rozostrenie sa zadávajú v ľubovoľných jednotkách pre veľkosti, okrem percent.

Príklad

Posuňme tieň nadol a doľava a pridajme malé rozostrenie:

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

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

Результат:

Príklad . Ostrý tieň

Teraz nastavme tieň na červenú farbu, posuňme ho nadol a doľava, ale odstráňme rozostrenie - tieň bude ostrý:

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

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

Результат:

Príklad . Rovnomerný tieň

Tieň nie je posunutý, ale je k nemu pridané rozostrenie:

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

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

Результат:

Pozri tiež

vlastnosť box-shadow,
ktorá nastavuje tieň kontajneru