Proprietatea text-shadow

Proprietatea text-shadow setează umbra textului. Ca valoare, proprietatea acceptă 4 parametri, enumerați prin spațiu, sau cuvântul cheie none, care anulează umbra complet (aceasta este valoarea implicită).

Sintaxă

selector {
	text-shadow: deplasare_pe_x deplasare_pe_y estompare culoare;
}

selector {
	text-shadow: none;
}

Parametrii

Parametru	Descriere
deplasare pe x	Stabilește deplasarea umbrei pe axa X. O valoare pozitivă deplasează spre dreapta, una negativă - spre stânga.
deplasare pe y	Stabilește deplasarea umbrei pe axa Y. O valoare pozitivă deplasează în jos, una negativă - în sus.
estompare	Stabilește estomparea umbrei. Cu cât valoarea este mai mare - cu atât umbra va fi mai estompată. Parametru opțional. Dacă nu este setat - umbra va fi clară.
culoare	Stabilește culoarea umbrei în orice unitate pentru culoare. Parametru opțional. Dacă nu este setat - culoarea umbrei coincide cu culoarea textului.

Deplasările pe axe și estomparea se stabilesc în orice unitate pentru dimensiuni, cu excepția procentelor.

Exemplu

Să deplasăm umbra în jos și spre stânga și să adăugăm o ușoară estompare:

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

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

Exemplu . Umbra clară

Acum să facem umbra de culoare roșie, să o deplasăm în jos și spre stânga, dar să eliminăm estomparea - umbra va fi clară:

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

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

Exemplu . Umbra uniformă

Acum umbra nu este deplasată, dar i s-a adăugat estompare:

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

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

Vedeți și

proprietatea box-shadow,
care setează umra containerului