Generator Box Shadow

Projektuj cienie z podglądem na żywo

Dobrze dobrany box-shadow sprawia, że interfejs wydaje się warstwowy, klikalny i dopracowany. Źle dobrany cień może sprawić, że ten sam interfejs będzie wyglądał niechlujnie lub niespójnie. Ten generator daje bezpośrednią kontrolę nad najważniejszymi wartościami: przesunięciem poziomym, przesunięciem pionowym, rozmyciem, rozciągnięciem, kolorem, przezroczystością i trybem inset. Gdy poruszasz każdym suwakiem, podgląd i kod CSS aktualizują się natychmiast, co ułatwia uzyskanie naturalnego efektu w porównaniu z ręcznym wpisywaniem liczb.

Wynik to standardowa deklaracja CSS, więc działa dla kart, okien modalnych, przycisków, list rozwijanych, pasków nawigacji i każdego innego elementu obsługującego box-shadow. Nie powstają żadne obrazy i nic nie jest przesyłane. Przeglądarka po prostu nakłada cień na element podglądu i kopiuje gotowy CSS, gdy jesteś gotowy.

Przesunięcie, rozmycie i rozciągnięcie – jak działają

Przesunięcia poziome i pionowe odsuwają cień od elementu. Dodatnie przesunięcie pionowe często sugeruje, że obiekt unosi się nad stroną, a cień z niewielkim przesunięciem może przypominać poświatę. Rozmycie steruje miękkością: małe rozmycie tworzy ostrą, graficzną krawędź, a większe – bardziej realistyczny, rozproszony cień. Rozciągnięcie zmienia rozmiar cienia przed zastosowaniem rozmycia. Dodatnie rozciągnięcie czyni cień szerszym i cięższym, ujemne zacieśnia go, dzięki czemu rozmycie wydaje się subtelniejsze.

Cienie w systemie projektowym

Cienie są najskuteczniejsze, gdy są spójne. Zamiast wymyślać nowy cień dla każdego komponentu, stwórz niewielką skalę elewacji: subtelny cień dla kart, mocniejszy dla wyskakujących okienek i skupiony dla okien modalnych. Testuj cienie zarówno na jasnych, jak i ciemnych powierzchniach, ponieważ ta sama przezroczystość może być zbyt mocna na jasnym tle, a zbyt słaba na ciemnym. Cienie inset przydają się w stanach wciśnięcia, zagłębionych polach i wpuszczonych panelach, ale należy ich używać oszczędnie, aby elementy sterujące pozostały czytelne i dostępne.