W tym artykule
Czym jest CSS box-shadow?
Właściwość CSS box-shadow dodaje efekty cienia wokół ramki elementu. Jest to jedna z najczęściej używanych właściwości CSS do tworzenia głębi i hierarchii wizualnej w projektowaniu stron. Pojedyncza deklaracja box-shadow może zawierać przesunięcia poziome i pionowe, promień rozmycia, promień rozszerzenia i kolor.
Cienie mogą być warstwowane — możesz zastosować wiele cieni do jednego elementu, oddzielając je przecinkami. Ta technika umożliwia zaawansowane efekty, takie jak realistyczna głębia, świecące obramowania i projekty neumorficzne. Słowo kluczowe inset odwraca cień do wewnątrz elementu dla efektów wciśnięcia lub zagłębienia.
Jak działa nasz generator
Generator Box Shadow od CheckTown zapewnia wizualny interfejs do tworzenia cieni CSS. Dostosuj suwaki, zobacz wynik w czasie rzeczywistym i skopiuj CSS, gdy jesteś zadowolony z efektu.
- Dostosuj przesunięcie X, przesunięcie Y, promień rozmycia i promień rozszerzenia za pomocą intuicyjnych suwaków
- Wybierz kolor cienia z kontrolą przezroczystości, przełącz tryb inset i nakładaj wiele cieni
- Zacznij od presetów takich jak Subtelny, Średni, Duży lub Blask — następnie dostosuj do swojego projektu
Wypróbuj za darmo — bez rejestracji
Utwórz cień →Kiedy używać cieni box-shadow
Cienie są niezbędne do tworzenia głębi i hierarchii wizualnej w nowoczesnych interfejsach webowych. Kierują wzrok użytkownika i komunikują interaktywność.
- Podniesienie kart i paneli — subtelne cienie unoszą karty nad tło, tworząc warstwowy interfejs
- Stany przycisków — dodawaj lub pogłębiaj cienie przy najechaniu, aby wskazać interaktywność i zapewnić dotykową informację zwrotną
- Modalne i rozwijane nakładki — wyraźne cienie oddzielają elementy pływające od strony poniżej
Często zadawane pytania
Czy box-shadow wpływa na układ lub wydajność?
Cienie nie wpływają na układ — są czysto wizualne i nie zmieniają rozmiaru ani pozycji elementu w przepływie dokumentu. Wydajność jest ogólnie doskonała w nowoczesnych przeglądarkach, ale bardzo duże promienie rozmycia lub wiele nałożonych cieni na często przemalowywanych elementach mogą wpłynąć na szybkość renderowania.
Czy można animować box-shadow?
Tak, box-shadow można animować za pomocą przejść CSS i keyframes. Jednak animowanie box-shadow wyzwala przemalowania, co może być kosztowne. Dla lepszej wydajności rozważ animowanie przezroczystości na pseudo-elemencie ze stałym cieniem zamiast przechodzenia samych wartości cienia.
Jaka jest różnica między box-shadow a drop-shadow?
box-shadow stosuje prostokątny cień do ramki elementu (włącznie z border-radius). filter: drop-shadow() stosuje cień podążający za rzeczywistym kształtem elementu, włącznie z przezroczystymi obszarami w obrazach. Używaj box-shadow dla elementów interfejsu i drop-shadow dla obrazów z przezroczystością.