Przykłady box-shadow w CSS: 40 cieni do skopiowania
Przykłady box-shadow w CSS
Przykłady box-shadow w CSS: 40 cieni do skopiowania jako CSS lub Tailwind
40 oryginalnych przykładów box-shadow, które możesz podejrzeć i skopiować jako CSS lub klasę Tailwind: miękkie, warstwowe, tylko u dołu, inset, kolorowe, do trybu ciemnego oraz skala elewacji.
Cień elementu zapisuje się jako box-shadow: przesunięcie-x przesunięcie-y rozmycie rozciągnięcie kolor, z opcjonalnym słowem kluczowym inset. Miękkie, realistyczne cienie zwykle składają się z dwóch lub trzech warstw o niskiej nieprzezroczystości, a cień tylko u dołu ma dodatnie przesunięcie y i ujemne rozciągnięcie. Wybierz dowolny z 40 przykładów poniżej i skopiuj go jako CSS lub Tailwind.
Pięć części wartości box-shadow
Część
Przykład
Co robi
przesunięcie x
Przesuwa cień w prawo (wartość dodatnia) lub w lewo (ujemna)
przesunięcie y
Przesuwa cień w dół (wartość dodatnia) lub w górę (ujemna)
promień rozmycia
Zmiękcza krawędź; nie może być ujemny; 0 oznacza ostrą krawędź
promień rozciągnięcia
-6px
Powiększa (wartość dodatnia) lub zmniejsza (ujemna) cień przed rozmyciem
rgb(0 0 0 / 0.15)
Gdy go pominiesz, przyjmuje kolor tekstu elementu
Rysuje cień wewnątrz obramowania zamiast na zewnątrz
Większość list cieni daje Ci obrazek i linijkę CSS. Ta dodatkowo wyjaśnia, dlaczego cień wygląda realistycznie lub sztucznie, podaje pasującą skalę elewacji, którą możesz wstawić do systemu projektowego, i pokazuje, jak zachować widoczność cieni na ciemnym tle. Każdy przykład jest oryginalny i działa na żywo w Twojej przeglądarce.
Filtruj galerię według stylu, na przykład warstwowe, tylko u dołu, inset lub kolorowe.
Każda karta pokazuje cień na prawdziwej powierzchni. Przełącz tło na ciemne, aby sprawdzić, jak się sprawdza.
Kliknij kartę, aby ją skopiować. Przełącznikiem wybierz czysty CSS albo dowolną klasę Tailwind.
Dla całego produktu skopiuj tokeny elewacji niżej zamiast pojedynczych cieni.
Użyj ujemnego rozciągnięcia z większym przesunięciem y, aby cień pozostał pod elementem i z dala od jego boków.
Zabarwiaj cienie ciemną wersją odcienia tła zamiast czystej czerni, aby uniknąć brudnego wyglądu.
Gdy uniesienie przy najechaniu kursorem działa nierówno, animuj nieprzezroczystość pseudoelementu z większym cieniem zamiast animować samo box-shadow.
box-shadow podąża za border-radius, więc zaokrąglone karty dostają zaokrąglone cienie bez dodatkowej pracy.
Najczęściej zadawane pytania
Jak dodać cień tylko u dołu?
Nadaj cieniowi dodatnie przesunięcie y i ujemne rozciągnięcie mniej więcej tej samej wielkości co rozmycie, na przykład box-shadow: 0 8px 6px -6px rgb(0 0 0 / 0.3). Ujemne rozciągnięcie wciąga cień z lewej, prawej i góry, więc widać tylko część wypchniętą poniżej dolnej krawędzi.
Jak użyć więcej niż jednego cienia?
Oddziel cienie przecinkami. Pierwszy cień na liście jest malowany nad pozostałymi, więc na początku umieść ciasny, ciemniejszy cień kontaktowy, a na końcu szeroki, blady cień otoczenia.
Dlaczego mój cień znika na ciemnym tle?
Czarny cień na niemal czarnej stronie nie ma prawie żadnego kontrastu. W ciemnych motywach stosuj jaśniejszy kolor powierzchni dla uniesionych elementów, dodaj cienkie jasne obramowanie lub podświetlenie inset 1px i zwiększ nieprzezroczystość cienia, zamiast polegać wyłącznie na nim.
Czym różni się box-shadow od drop-shadow()?
box-shadow podąża za pudełkiem elementu i jego border-radius. filter: drop-shadow() podąża za widocznymi pikselami, więc otula przezroczyste pliki PNG i kształty SVG, ale nie ma wartości rozciągnięcia ani opcji inset.
Jak napisać własny cień w Tailwind?
Użyj dowolnej wartości z podkreśleniami zamiast spacji, na przykład shadow-[0_8px_24px_-6px_rgb(0_0_0/0.2)]. Wbudowana skala biegnie od shadow-2xs do shadow-2xl, a inset-shadow-sm i pokrewne klasy obsługują cienie wewnętrzne.
Dlaczego warstwowe cienie wyglądają bardziej realistycznie
Prawdziwe przedmioty rzucają jednocześnie dwa rodzaje cienia: mały ciemny dokładnie tam, gdzie stykają się z powierzchnią, i szeroki blady od światła odbijającego się po pomieszczeniu. Pojedynczy rozmyty cień próbuje być jednym i drugim, a w efekcie wygląda jak szara aureola.
Nałożenie od dwóch do czterech warstw, z których każda ma mniej więcej dwukrotnie większe przesunięcie i rozmycie niż poprzednia oraz niższą nieprzezroczystość, naśladuje to połączenie. Koszt jest niewielki, ale bardzo duże wartości rozmycia na wielu elementach mogą spowolnić przewijanie na słabszych urządzeniach, więc ciężkie cienie stosuj tylko na kilku uniesionych powierzchniach.
Cienie jako skala, a nie jednorazowe rozwiązanie
Produkt wydaje się spójny, gdy każdy uniesiony element wybiera z krótkiej drabinki: karty w spoczynku, karty po najechaniu, listy rozwijane, okna dialogowe. Zapisz każdy stopień jako własną właściwość CSS i używaj jej ponownie, aby późniejsza zmiana kierunku światła wymagała edycji w jednym miejscu.
Niech przesunięcie y rośnie szybciej niż przesunięcie x, które przy źródle światła bezpośrednio nad elementem zostaje na zerze. Mieszanie kierunków światła między komponentami to jeden z najszybszych sposobów, by interfejs wyglądał na złożony z przypadkowych części.
Cień tylko u dołu
Ujemne rozciągnięcie zmniejsza cień z każdej strony, a przesunięcie y wypycha go następnie w dół. Utrzymuj rozciągnięcie blisko minus wartości rozmycia, aby nic nie wychodziło poza lewą i prawą krawędź.
Trzy cienie tylko u dołu
Od lewej: ciasna krawędź, łagodniejszy cień i cienka linia stosowana pod przyklejonymi nagłówkami.
Skala elewacji do wielokrotnego użytku
Pięć stopni wystarcza w większości interfejsów. Każdy podwaja przesunięcie i rozmycie poprzedniego i zachowuje pod spodem ciasną warstwę kontaktową.