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.

Fot: Erick Dimas, CC BY-SA 3.0.

Box-shadow

Przykład użycia funkcji box-shadow:

Efekt:

Lub:

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.

Efekt:

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

Text-shadow

Przykład użycia funkcji text-shadow:

Efekt:

Przykład użycia funkcji text-shadow

Lub:

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.

, , , , , ,