Generator cienia CSS (box-shadow)

Składnia box-shadow

box-shadow: <przesunięcie-x> <przesunięcie-y> <rozmycie> <rozszerzenie> <kolor> [inset];

• przesunięcie-x: dodatnie = w prawo, ujemne = w lewo.
• przesunięcie-y: dodatnie = w dół, ujemne = w górę.
• rozmycie: 0 = ostra krawędź, większe = bardziej miękkie. Widoczny rozmiar to mniej więcej 1,5× rozmycia poza elementem.
• rozszerzenie: dodatkowy rozmiar poza elementem. Dodatnie powiększa cień; ujemne go zmniejsza (przydatne do subtelnych otoczek).
• kolor: obsługuje dowolny kolor CSS. rgba(0, 0, 0, 0.15) to chleb powszedni.
• inset: słowo kluczowe odwracające cień do wnętrza elementu.

Warstwowe cienie wyglądają prawdziwie

Ten generator wypisuje po jednej regule cienia; aby zbudować cień warstwowy, generuj każdą warstwę osobno i łącz reguły przecinkiem.

Jeden cień z 0 0 40px wygląda mglisto. Dwa cienie, mały, ostry blisko elementu i większy, miękki dalej, naśladują to, jak rozprasza się prawdziwe światło.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

Pierwszy wiersz daje ciasny cień kontaktowy; drugi miększy cień otoczenia. Ten jeden wzorzec pokrywa 80% interfejsów w stylu kart.

Systemy uniesienia

Material Design używa 6 poziomów uniesienia, każdy z innym zestawem cieni. W uproszczeniu:

Wybierz jeden na rolę uniesienia i używaj go konsekwentnie.

Kolorowe cienie wyglądają bardziej naturalnie

Czysto czarne cienie wyglądają sztucznie, bo prawdziwe cienie są podbarwione przez powierzchnię pod nimi. Spróbuj:

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);

• chłodna niebieskoszarość zamiast czystej czerni. Na ciepłych tłach użyj cieplejszego odcienia.

Wydajność

Cienie box-shadow są malowane przy każdym przemalowaniu. Duże, ciężkie cienie na wielu elementach mogą spowalniać przewijanie. Sposoby zaradcze:

• Użyj transform: translateZ(0) na elemencie, aby wymusić warstwę kompozytową.
• Zastąp złożone cienie przez filter: drop-shadow() tylko wtedy, gdy cień ma podążać za clip-path (ogólnie jest wolniejszy).
• Ogranicz cienie na elementach, które często się przerysowują.

Inset dla stanów wciśnięcia

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

Cienie inset udają wgłębienie, przycisk wygląda jak wciśnięty w powierzchnię. Połącz z małym przesunięciem w dół transform: translateY(1px), aby uzyskać dotykowe kliknięcie.