Generator cieni CSS box-shadow z podglądem kart | We.Inc
Twórz warstwowe cienie CSS box-shadow i oglądaj je na prawdziwych kartach usług i cenników, na jasnym i ciemnym tle, z widocznym stanem fokusu. Skopiuj kod CSS i gotowy komponent karty.
Cienie trudno ocenić na szarym kwadracie. Tutaj dopracowujesz warstwowy box-shadow i widzisz go na karcie usługi i karcie cennika, na jasnej lub ciemnej stronie, z pierścieniem fokusu klawiatury, który możesz przetestować klawiszem Tab. Gdy wygląda dobrze, skopiuj kod CSS lub cały komponent karty. Wszystko działa w Twojej przeglądarce. Nic z tego, co wpiszesz, nie jest wysyłane do We.Inc ani nikogo innego i znika po zamknięciu karty.
Zacznij od gotowego ustawienia lub dostosuj pierwszą warstwę: przesunięcie poziome i pionowe, rozmycie, rozprzestrzenienie, kolor, krycie i inset.
Dodaj do pięciu warstw. Warstwowe cienie (ciasny plus szeroki i miękki) wyglądają naturalniej niż jeden duży cień.
Przełączaj podgląd między jasną a ciemną stroną. Naciśnij Tab, aby przenieść fokus na przyciski karty i sprawdzić, czy pierścień fokusu pozostaje widoczny.
Kontrole ostrzegają, gdy cień jest zbyt słaby, by był widoczny na wybranym tle, i gdy tekst karty ma kontrast poniżej poziomu WCAG AA.
Skopiuj deklarację box-shadow lub cały komponent karty z HTML i CSS.
Na ciemnych tłach cienie prawie znikają. Zamiast tego użyj nieco jaśniejszego koloru karty lub cienkiej ramki, aby oddzielić kartę.
Zabarw kolor cienia w stronę tła zamiast czystej czerni, aby uzyskać łagodniejszy wygląd.
Nigdy nie polegaj wyłącznie na cieniu, by pokazać fokus. Użyj także wyraźnego obrysu.
Duże wartości rozmycia są kosztowniejsze do narysowania. Unikaj ich animowania na długich listach.
Używaj jednego lub dwóch poziomów cienia na całej stronie, aby głębia coś znaczyła.
Najczęściej zadawane pytania
Jak działa właściwość CSS box-shadow?
box-shadow przyjmuje przesunięcie poziome, przesunięcie pionowe, opcjonalny promień rozmycia, opcjonalne rozprzestrzenienie i kolor, a także słowo kluczowe inset dla cieni wewnętrznych. Można wymienić kilka cieni oddzielonych przecinkami; pierwszy jest rysowany na wierzchu.
Dlaczego warstwowe cienie wyglądają lepiej?
Prawdziwe przedmioty rzucają ostry cień blisko siebie i miękki, szeroki dalej. Dwie lub trzy warstwy z rosnącym rozmyciem i malejącym kryciem to naśladują.
Dlaczego mój cień jest niewidoczny na ciemnym tle?
Ciemny cień na ciemnej stronie prawie nie ma kontrastu. Narzędzie ostrzega o tym. Zamiast tego podnieś kartę jaśniejszym kolorem powierzchni lub subtelną ramką.
Czy box-shadow wpływa na dostępność?
Cienie są dekoracją, więc same nie muszą spełniać zasad kontrastu. Ważne jest, aby tekst na karcie pozostawał czytelny, a fokus był pokazany widocznym obrysem, a nie tylko zmianą cienia.
Czy generator cieni CSS jest darmowy?
Tak, bez rejestracji. Skopiuj kod do dowolnego projektu.
Testuj cienie na komponentach, które opublikujesz
Cień, który dobrze wygląda na pojedynczym kwadracie, może wyglądać ciężko na rzędzie kart cennika albo zniknąć pod zdjęciem. Podgląd na kartach, których naprawdę używa strona małej firmy, czyli kartach usług z ikoną i wyróżnionym planie cenowym, pokazuje efekt, który otrzymasz.
Kod komponentu zawiera obrys focus-visible, dzięki czemu karta pozostaje użyteczna z klawiatury niezależnie od wybranego cienia.