Generator box-shadow: do czego służy
Właściwość box-shadow przyjmuje pięć wartości w określonej kolejności, a różnica między rozmyciem a rozciągnięciem nie jest oczywista z samej składni. Ten generator daje suwaki i podgląd na żywo, żeby dopracować cień, aż będzie wyglądał naturalnie, i skopiować wynikowy CSS.
Generator box-shadow: jak korzystać
- Dostosuj przesunięcie poziome i pionowe, żeby ustawić kierunek światła.
- Zwiększ rozmycie, żeby zmiękczyć krawędź, i rozciągnięcie, żeby powiększyć lub zmniejszyć cień.
- Wybierz kolor i przezroczystość albo włącz cień wewnętrzny (inset).
- Skopiuj wygenerowany CSS.
Najczęściej zadawane pytania
Jaka jest różnica między rozmyciem a rozciągnięciem?
Rozmycie zmiękcza krawędź cienia bez zmiany jego rozmiaru. Rozciągnięcie powiększa lub zmniejsza kształt przed rozmyciem, więc ujemne rozciągnięcie z dużym rozmyciem daje wąski, subtelny cień.
Jak uzyskać realistyczny cień?
Łącząc dwa lub trzy cienie: krótki i ciemniejszy blisko elementu oraz szerszy i słabszy dalej naśladują prawdziwe światło znacznie lepiej niż jeden intensywny cień. Wygeneruj każdą warstwę tutaj i połącz je przecinkami.
Kiedy używać cienia wewnętrznego?
Dla elementów, które mają wyglądać na wgłębione: wciśniętych przycisków, pól formularza i wpuszczonych paneli. Cień jest rysowany wewnątrz krawędzi zamiast na zewnątrz.
Czy cienie wpływają na wydajność?
Duże rozmycia na wielu elementach mogą kosztować czas renderowania, zwłaszcza przy przewijaniu. Jeśli zauważysz problemy, zmniejsz promień rozmycia albo przenieś element na własną warstwę.