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 realistycz
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.
Przeczytaj także

CSS Container Queries już działa!
Container Queries już działa! Zapowiedzi potwierdziły się i mamy już możliwość korzystania z tego rozwiązania w najnowszych, stabilnych wersjach przeglądarek.

Kolory LCH to przyszłość w CSS?
Jednostki LCH są to nowe jednostki kolorów CSS, które są częścią specyfikacji CSS Color Level 4. Dają one dużo większe możliwości niż np. HEX czy RGB.

Nowa składnia media query w CSS
Budowanie nowoczesnego designu strony powinno być oparte o poprawne wypełnienie ekranu treścią i przedstawienie jej w efektowny sposób. Z pomocą przychodzi nam tutaj technika zwana @media query.