Card Shadow CSS — Subtelny kod typu box-shadow
Twórz wizualnie kod CSS typu box-shadow: suwaki do przesunięcia, rozmycia, rozłożenia, koloru z kryciem, trybu wstawiania i do czterech warstw z podglądem na żywo.
Wynik
Ta strona otwiera generator cieni pudełkowych ustawiony na klasyczny cień karty: 2 piksele w dół, rozmycie 8 pikseli, 15% krycia czerni. Celowo jest cicho — na tyle, aby oddzielić kartę od strony bez zapowiedzi — a podgląd dokładnie pokazuje, jak cicho.
Ten zakres odpowiada najniższym stopniom wzniesienia w większości systemów projektowych: kartom list, menu rozwijanym, wyskakującym okienkom i wierszom tabeli po najechaniu kursorem. Jeśli potrzebujesz silniejszego uniesienia modali lub paneli pływających, zwiększ przesunięcie Y i rozmyj razem — powinny one rosnąć proporcjonalnie, aby źródło światła było wiarygodne.
Skopiuj linię cienia prostokątnego do stylów komponentów lub zduplikuj ją jako drugą warstwę z mocniejszym rozmyciem, aby dodać definicję krawędzi. Narzędzie jest bezpłatne i działa całkowicie w przeglądarce.