Informacje o nowych artykułach oraz akcjach edukacyjnych prosto na Twojej skrzynce e-mail!

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:

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.

Spodobało się?

Jeśli tak, to zarejestruj się do newslettera aby otrzymywać informacje nowych artykułach oraz akcjach edukacyjnych. Gwarantuję 100% satysfakcji i żadnego spamowania!

, , , , , ,

Dodaj komentarz

Komentarze (1)

Odpowiedz

Twój adres e-mail nie zostanie opublikowany.

Pin It on Pinterest