CSS pozwala nadać cień różnym elementom na stronie internetowej.
Dodanie cienia dla tekstu
np. p { text-shadow: poziom pion }
Wartości poziom i pion określają własności cienia i muszą być podane obowiązkowo:
poziom - przesunięcie cienia w prawo (ujemne wartości przesuwają w lewo)
pion - przesunięcie cienia w dół (ujemne wartości przesuwają w górę)
Opcjonalnie można również ustawić:
rozmycie - promień efektu rozmycia
kolor - kolor bazowy efektu
Przy ustawianiu wartości poziom, pion oraz rozmycie używa się jednostek długości.
Można ustawić więcej niż jeden efekt - efekty należy rozdzielić przecinkami. Zostaną one zastosowane w kolejności podawania i nałożone na siebie.
Dodanie cienia obramowaniu
np. h1{ box-shadow: inset poziom pion } - cień wewnątrz elementu
h1{ box-shadow: outset poziom pion } - cień na zewnątrz elementu
Podobnie jak przy ustawianiu cienia przy tekście tuaj również wartości poziom i pion są obowiązkowe. Opcjonalnie można ustawiać rozmycie, kolor i rozprzestrzenienie. Ten ostatni parametr to odległość na jaką cień ma wychodzić spod krawędzi elementu, a dla wartości ujemnych chować cień pod elementem.
Aby wstawić cień można również użyć filtru
np. h1 { filter: DropShadow(Color=kolor, OffX=x, OffY=y, Positive=typ) }
kolor-kolor cienia
x-liczba pikseli o które ma zostać przesunięty cień w poziomie (wartości dodatnie przesuwają w prawo, ujemne - w lewo)
y-liczba pikseli o które zostanie przesunięty cień w pionie (wartości dodatnie przesuwają w dół, ujemne - w górę)
typ-sposób tworzenia cienia (1 - cień będzie tworzony z kolorów elementu, które nie są przezroczyste, 0 - cień będzie tworzony z koloru przezroczystego. Domyślnie jest 1.)
Za pomocą filtru można ustawić również rozmyty cień
h1 { filter: Shadow(Color=kolor, Direction=kierunek) }
Kierunek cienia w stopniach (zgodnie z ruchem wskazówek zegara względem pionu):
0 - góra
45 - góra, prawo
90 - prawo
135 - dół, prawo
180 - dół
225 - dół, lewo (domyślny)
270 - lewo
315 - góra, lewo
