Generator cieni CSS (box-shadow)

Jak korzystać z generatora cieni

1. Zacznij od gotowego stylu albo zostaw domyślny cień Miękki. Wiersz Gotowe style zawiera opcje Miękki, Twardy, Warstwowy, Uniesienie, Neumorfizm, Wewnętrzny i Poświata.
2. W sekcji Warstwy cienia kliknij warstwę, aby ją wybrać. Każdą warstwę możesz przesunąć przyciskami W górę i W dół albo usunąć przyciskiem Usuń. Dodaj warstwę duplikuje wybraną warstwę, aby można było dopracować jej kopię.
3. Zmień wybraną warstwę w sekcji Edytuj wybraną warstwę: przeciągnij kropkę w polu Przesunięcie albo użyj suwaków i pól liczbowych Przesunięcie poziome (px), Przesunięcie pionowe (px), Rozmycie (px) i Rozciągnięcie (px).
4. Wybierz Kolor cienia w próbniku kolorów lub wpisz dowolny kolor CSS w polu kodu, a następnie ustaw Krycie (%). Zaznacz Inset (cień wewnętrzny), aby narysować cień wewnątrz elementu.
5. Dostosuj Ustawienia podglądu (Kolor elementu, Kolor tła, Promień narożników (px)), aby zobaczyć cień na swoich prawdziwych kolorach. Wpływają one tylko na podgląd.
6. Skopiuj deklarację z pola Kod CSS przyciskiem Kopiuj.

Klawiatura: ustaw fokus na kropce w polu Przesunięcie i przesuwaj ją strzałkami o 1 px albo o 10 px z wciśniętym Shift.

Jak działa box-shadow

Składnia pojedynczego cienia to box-shadow: [inset] x y blur spread color.

• x i y przesuwają cień w prawo i w dół. Wartości ujemne przesuwają go w lewo i w górę. Źródło światła nad elementem oznacza dodatnie y.
• Rozmycie (blur) zmiękcza krawędź. Nie może być ujemne. Rozmycie 0 daje ostrą kopię elementu.
• Rozciągnięcie (spread) powiększa (wartość dodatnia) lub zmniejsza (ujemna) cień przed rozmyciem. Ujemne rozciągnięcie z dużym y utrzymuje cień pod elementem, a nie dookoła niego.
• Kolor zwykle zawiera przezroczystość. To narzędzie zapisuje kolory nieprzezroczyste jako HEX, a półprzezroczyste jako rgba(), które rozumie każda przeglądarka. Jeśli wpiszesz kolor, który ma już kanał alfa, Krycie (%) go mnoży.
• inset umieszcza cień wewnątrz obramowania, jakby element był wciśnięty w stronę.

Cień podąża za border-radius elementu i nigdy nie zmienia układu: nie zajmuje miejsca i nie wywołuje pasków przewijania.

Po co nakładać kilka cieni?

Prawdziwe cienie to nie jeden rozmyty prostokąt. Mały, ciemny i zwarty cień leży tuż pod obiektem, a duży, blady i rozmyty rozchodzi się dalej. Nałożenie od dwóch do pięciu warstw naśladuje to zjawisko i wygląda znacznie naturalniej niż jeden ciężki cień. Styl Warstwowy podwaja przesunięcie i rozmycie na każdym kroku przy niskim kryciu – to technika spopularyzowana przez wiele systemów projektowych. Uniesienie naśladuje trójwarstwowe cienie Material Design.

Pierwsza warstwa na liście jest malowana na wierzchu pozostałych, dokładnie tak jak w wartości CSS. Kolejność ma znaczenie głównie wtedy, gdy łączysz cienie wewnętrzne z zewnętrznymi lub używasz mocnych kolorów.

Neumorfizm

Neumorfizm („soft UI”) stosuje dwa cienie na elemencie w tym samym kolorze co tło: ciemny przesunięty w dół i w prawo oraz jasny przesunięty w górę i w lewo. Styl Neumorfizm ustawia oba kolory na #e0e5ec. Pamiętaj, że ten styl ma niski kontrast, więc zbudowane w nim przyciski potrzebują wyraźnego stanu fokusu i czytelnych etykiet.