Cień pod elementami w CSS 3 – box-shadow i text-shadow

Kaskadowe arkusze stylów w swojej trzeciej wersji dają bardzo dużo możliwości w projektowaniu graficznym stron internetowych. Jedną z ciekawszych opcji jest własność box-shadow oraz text-shadow, umożliwiająca stworzenie ciekawie wyglądającego cienia pod danym elementem np. pod menu głównym czy widgetem.

Fot: Erick Dimas, CC BY-SA 3.0.

Box-shadow

Przykład użycia funkcji box-shadow:

box-shadow: 2px 2px 2px 2px #ddd inset;

Efekt:

Lub:

box-shadow: 2px 2px 2px 2px #ddd;

Efekt:

Jako parametry podajemy kolejno:

• wartość przesunięcia cienia w poziomie (dodatnia lub ujemna),
• wartość przesunięcia cienia w pionie (dodatnia lub ujemna),
• opcjonalnie wartość rozmycia cienia (dodatnia lub ujemna),
• wartość określająca wielkość cienia (dodatnia – powiększenie lub ujemna – pomniejszenie),
• kolor cienia,
• opcjonalnie inset jeśli cień ma być wewnątrz elementu.

Ciekawy efekt możemy na przykład uzyskać dzięki wyzerowaniu pierwszej własności, wartość przesunięcia w pionie i rozmycie ustawić np. na 15px,  a wartość pomniejszenia cienia na -15px.

box-shadow: 0 20px 20px -25px #999;

Efekt:

Oczywiście dla jednego elementu możemy określić kilka warstw cieni na przykład:

box-shadow: 0 20px 20px -25px #999, 0 20px 20px -25px #666, 0 20px 20px -25px #333;

Text-shadow

Przykład użycia funkcji text-shadow:

text-shadow: 4px 4px 4px #ddd;

Efekt:

Przykład użycia funkcji text-shadow

Lub:

text-shadow: 0 2px 0 #fff, 0 2px 0 #000, 0 2px 3px #000;

Efekt:

Przykład użycia funkcji text-shadow

Jako parametry podajemy kolejno:

• wartość przesunięcia cienia w poziomie (dodatnia lub ujemna),
• wartość przesunięcia cienia w pionie (dodatnia lub ujemna),
• wartość rozmycia cienia (dodatnia lub ujemna),
• kolor cienia.

Box-shadow, Cienie, Cienie w CSS, CSS, CSS 3, Text-shadow, Tworzenie stron WWW