Właściwość text-shadow

Właściwość text-shadow ustawia cień tekstowi. Jako wartość właściwość przyjmuje 4 parametry, wymieniane przez spację, albo słowo kluczowe none, które całkowicie usuwa cień (wartość domyślna).

Składnia

selektor {
	text-shadow: przesunięcie_x przesunięcie_y rozmycie kolor;
}

selektor {
	text-shadow: none;
}

Parametry

Parametr	Opis
przesunięcie po x	Ustawia przesunięcie cienia wzdłuż osi X. Wartość dodatnia przesuwa w prawo, ujemna - w lewo.
przesunięcie po y	Ustawia przesunięcie cienia wzdłuż osi Y. Wartość dodatnia przesuwa w dół, ujemna - w górę.
rozmycie	Ustawia rozmycie cienia. Im większa wartość - tym bardziej rozmyty będzie cień. Parametr opcjonalny. Jeśli nie jest ustawiony - cień będzie ostry.
kolor	Ustawia kolor cienia w dowolnych jednostkach koloru. Parametr opcjonalny. Jeśli nie jest ustawiony - kolor cienia będzie taki sam jak kolor tekstu.

Przesunięcia wzdłuż osi i rozmycie są ustawiane w dowolnych jednostkach długości, z wyjątkiem procentów.

Przykład

Przesuńmy cień w dół i w lewo oraz dodajmy lekkie rozmycie:

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

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

Przykład . Ostry cień

A teraz ustawmy kolor cienia na czerwony, przesuńmy go w dół i w lewo, ale usuńmy rozmycie - cień będzie ostry:

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

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

Przykład . Równomierny cień

Cień nie jest przesunięty, ale ma dodane rozmycie:

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

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

Zobacz też

właściwość box-shadow,
która ustawia cień kontenerowi