drop-shadow(), czyli ładniejszy 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.