Box Shadow Generator
Generate box shadows
Generate box shadows Działa lokalnie w Twojej przeglądarce
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the
Generator cieni Box tworzy cień na podstawie przesunięcia, rozmycia, rozmycia, koloru i krycia, z podglądem na żywo i CSS. Dwa ustawienia, które ludzie mylą, to rozmycie i rozproszenie: rozmycie zmiękcza krawędź na zewnątrz i do wewnątrz od kształtu cienia, podczas gdy rozmycie zwiększa lub zmniejsza rozmiar cienia, zanim nastąpi jakiekolwiek rozmycie. Ujemny rozrzut sprawia, że miękki cień nie wygląda jak aureola, dlatego też domyślne ustawienia używają tutaj małej wartości ujemnej.
Where people use the
- Budowa skali wysokości dla kart, modali i menu.
- Tworzenie stanu naciśnięcia lub skupienia z wstawionym cieniem.
- Zmiękczanie granicy bez dodawania prawdziwej granicy.
- Sprawdzanie, jak faktycznie wyglądają wartości cieni w specyfikacji projektu.
How to use the
- 1
Ustaw przesunięcia
Przesunięcie X przesuwa cień w prawo, przesunięcie Y przesuwa go w dół. Wartości ujemne przesuwają to w drugą stronę.
- 2
Ustaw rozmycie i rozproszenie
Rozmycie zmiękcza krawędź. Rozprzestrzenianie rozszerza cień przed rozmyciem; użyj małego ujemnego rozłożenia dla cienia znajdującego się pod elementem, a nie wokół niego.
- 3
Wybierz kolor i przezroczystość
Czysta czerń przy pełnym kryciu wygląda surowo. Niskie krycie, gdzieś pomiędzy 8 a 20 procent, oznacza raczej głębię niż brud.
- 4
Zaznacz wstawkę, jeśli chcesz uzyskać cień wewnętrzny
Wstawka rysuje cień wewnątrz elementu, a nie za nim, co pasuje do stanów wciśniętych i zagłębień.
- 5
Skopiuj CSS
Reguła zawiera kolor rgba, więc można ją wkleić bezpośrednio do arkusza stylów.
Wskazówki i najlepsze praktyki
- Dwuwarstwowe cienie wyglądają znacznie lepiej niż jeden ciężki.
- Utrzymuj spójne źródło światła: jeśli jedna karta zostanie rzucona w dół, wszystkie powinny to zrobić.
- Uważaj na cienie przycinane przez element nadrzędny z ukrytym przepełnieniem.
Często zadawane pytania
Jaka jest różnica między rozmyciem a rozproszeniem?
Rozprzestrzenianie zmienia rozmiar kształtu cienia przed jakimkolwiek zmiękczeniem, dodatni wzrost, a ujemny zmniejszenie. Rozmycie następnie zmiękcza krawędź o zadany promień. Aby uzyskać ciasny cień pod kartą, potrzebujesz małego rozmycia i lekko ujemnego rozproszenia.
Dlaczego mój cień wygląda szaro i brudno?
Ponieważ jest to czysta czerń przy wysokim stopniu krycia. Użyj niskiej wartości alfa, około 0,08 do 0,2 i rozważ zabarwienie cienia w kierunku odcienia tła, który będzie wyglądał znacznie bardziej naturalnie.
Czy mogę mieć więcej niż jeden cień?
Tak. Oddziel kilka cieni przecinkami w tej samej deklaracji; układają się od przodu do tyłu, więc pierwszy jest na górze. Warstwowe cienie pokazują, jak budowana jest miękka i realistyczna elewacja.
Czy cień pudełka wpływa na układ?
Nie. Cienie malowane są na zewnątrz pudełka elementu i nie zajmują miejsca, więc mogą być przycinane przez rodzica z ukrytym przelewem lub przez szczelny pojemnik.
Czy animowanie cienia pudełkowego jest drogie?
Tak, stosunkowo. Zmiana rozmycia lub rozproszenia zmusza przeglądarkę do ponownego malowania cienia w każdej klatce. Aby uzyskać płynny ruch, zamiast tego animuj krycie, przekształcaj albo przenikaj między dwoma wstępnie wyrenderowanymi cieniami.