drop-shadow(), czyli ładniejszy cień w CSS

Cienie pod elementami na stronie internetowej bardzo często poprawiają ich czytelność. Ma to miejsce na przykład podczas użycia wyskakujących okien czy tak zwanych modali. Jeszcze kiedyś chcąc uwydatnić element należało przygotować odpowiednią grafikę i umieścić ją w tle elementu. Dzisiaj mamy ten komfort, że możemy stworzyć cień w CSS i będzie on bardzo realistyczny.

cień w css

Teoria

Cień w CSS możemy stworzyć na kilka sposobów. Obecnie są dwa podstawowe:

  • box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
  • filter: drop-shadow(30px 10px 4px #4444dd);

Oba przykłady w rezultacie wyświetlą zadany cień, jednak będą się one różnić. Do tej różnicy zaraz wrócę.

Składnia box-shadow jest następująca: przesunięcie w poziomie, przesunięcie w pionie, rozszerzanie, rozmycie oraz kolor.

Składnia drop-shadow to: przesunięcie w poziomie, przesunięcie w pionie, rozmycie oraz kolor.

Obecnie niemal wszystkie przeglądarki wspierają takie cienie.

Przewaga drop-shadow

Wracamy do wspomnianej różnicy. Zasadniczą różnicą między box-shadow a drop-shadow jest okalanie elementu. Jak łatwo zobaczyć na obrazie wyżej, na gwieździe z lewej jest użyty box-shadow i cień nie wygląda najlepiej, ponieważ jest wyświetlany na całym kontenerze. Z prawej gwiazda posiada drop-shadow i cień wygląda zdecydowanie lepiej, gdyż jest od odzwierciedleniem kształtu elementu.

W skrócie: drop-shadow wyświetli cień dopasowany do kształtu, np. koła czy gwiazdy.

Przykładowe cienie w CSS

Pierwszym z przykładów może być wystająca gwiazda z kontenera. Na to nałożymy cień w taki sposób, czerwony kontener miał cień, jednak powiększony o wystającą gwiazdę.

dark

Drugi przykład niech będzie ze słodkim kotkiem:

dark

Powyższy przykład należy nieco omówić. Otóż, dlaczego wystająca głowa kota również otrzymała cień nałożony na kontener? Filtr drop-shadow korzysta z maski i elementy bez tła (w tym przypadku PNG) wystające poza obrys kontenera również otrzymają cień.

Podsumowanie

Na powyższych przykładach pokazałem zasadę działania cieni realizowanych za pomocą drop-shadow. Mam nadzieję, że jasno pokazałem przewagę tej metody.