Cienie i głębia w projektowaniu stron — jak używać box-shadow z wyczuciem
Jak cienie budują hierarchię na stronie, ile poziomów „wysokości” wystarczy, dlaczego dwa cienie wyglądają lepiej niż jeden, jak zachować cienie w trybie ciemnym i czego unikać, żeby strona nie wyglądała jak z 2008 roku.
Cień mówi: „to jest nad tłem”
Na płaskim ekranie cień jest najprostszym sposobem pokazania, że element leży wyżej niż reszta — można go kliknąć, przesunąć albo właśnie się pojawił. Im wyżej element, tym większy i bardziej rozmyty cień.
Skala wysokości
Zamiast wymyślać cień dla każdego elementu, przygotuj 3–5 poziomów i używaj ich konsekwentnie:
| Poziom | Przykład użycia | Cień (przykład) |
|---|---|---|
| 1 | karta na stronie | 0 1px 3px rgba(15,23,42,.12) |
| 2 | karta po najechaniu, przycisk pływający | 0 4px 12px rgba(15,23,42,.12) |
| 3 | menu rozwijane, podpowiedź | 0 10px 24px rgba(15,23,42,.16) |
| 4 | okno dialogowe | 0 20px 48px rgba(15,23,42,.22) |
:root { --cien-1: 0 1px 3px rgba(15, 23, 42, .12); --cien-2: 0 4px 12px rgba(15, 23, 42, .12); } .karta { box-shadow: var(--cien-1); } .karta:hover { box-shadow: var(--cien-2); }
Własne cienie zaprojektujesz z podglądem w generatorze cieni CSS.
Dwa cienie zamiast jednego
W prawdziwym świecie obiekt rzuca ostry, krótki cień tuż przy powierzchni i szeroki, rozmyty cień dalej. Połączenie dwóch warstw — małej i ciemniejszej oraz dużej i jaśniejszej — wygląda dużo naturalniej niż jeden „mocny” cień.
Kolor cienia
Czysta czerń z dużym kryciem wygląda brudno. Lepiej użyć ciemnego koloru zbliżonego do odcienia tła lub marki (granat, ciemny fiolet) z kryciem 10–25%. Kolory przeliczysz na RGBA w konwerterze kolorów (zob. kolory w CSS).
Tryb ciemny
Na ciemnym tle cień jest prawie niewidoczny. W trybie ciemnym głębię pokazuje się raczej jaśniejszym tłem elementów położonych wyżej (np. tło strony #0f172a, karta #1e293b, okno #334155) i delikatną, jasną ramką. Cienie można zostawić, ale z większym kryciem.
Czego unikać
- Cieni na wszystkim — gdy wszystko „pływa”, nic się nie wyróżnia.
- Cieni w różnych kierunkach — światło pada z jednej strony, zwykle z góry.
- Ciemnych, ostrych cieni z dużym przesunięciem — wyglądają przestarzale.
- Cienia zamiast kontrastu — tekst musi być czytelny niezależnie od cieni (zob. kontrast i dostępność, kalkulator kontrastu).
Subtelne przejścia kolorów, które dobrze współgrają z cieniami, przygotujesz w generatorze gradientów, a szybkie szkice układu — według poradnika makieta strony.
Narzędzia do tego poradnika
CSSbox-shadowprojektowanie stronUItryb ciemny