Generator box-shadow w CSS
Przeciągaj suwaki i kopiuj CSS.
- Działa w przeglądarce — twój tekst nigdy nie jest nigdzie wysyłany
- Bez rejestracji, bez limitów, za darmo, tak często, jak chcesz
Jak to działa
Box-shadow przyjmuje cztery liczby i kolor w określonej kolejności, a różnica między cieniem, który daje wrażenie głębi, a takim, który wygląda jak naklejka, leży wyłącznie w tych liczbach. Oglądanie zmian podczas przeciągania jest znacznie szybsze niż zgadywanie.
Co oznaczają cztery liczby
W kolejności: przesunięcie poziome, przesunięcie pionowe, promień rozmycia i rozprzestrzenienie. Przesunięcia przesuwają cień; rozmycie zmiękcza jego krawędź; rozprzestrzenienie powiększa lub zmniejsza go przed rozmyciem. Ujemne rozprzestrzenienie wciąga cień do środka, dzięki czemu uzyskujesz ciasny cień pod kartą, który nie rozlewa się na boki.
Jak sprawić, by wyglądał realistycznie
Światło zwykle pada z góry, więc małe dodatnie przesunięcie pionowe bez przesunięcia poziomego wygląda naturalnie. Duże, bardzo przezroczyste cienie dają wrażenie miękkiej głębi; małe, ciemne i ostre wyglądają jak wycięta naklejka. Prawdziwe przedmioty rzucają cienie tym bardziej rozmyte, im dalej są od powierzchni — większe rozmycie sugeruje wyżej uniesiony element.
Cienie wewnętrzne
Cień wewnętrzny jest rysowany wewnątrz elementu zamiast na zewnątrz, w ten sposób powstają wciśnięte przyciski, pola formularzy i wgłębione panele. Obowiązują te same cztery liczby, tylko skierowane do wewnątrz.
Kilka cieni naraz
CSS przyjmuje listę rozdzieloną przecinkami, a nałożenie dwóch — jednego ciasnego i ciemnego, drugiego szerokiego i słabego — wygląda znacznie lepiej niż pojedynczy. Ten generator tworzy jeden; aby uzyskać efekt warstwowy, wklej dwa razem samodzielnie.
Generator box-shadow w CSS — pytania
W jakiej kolejności są wartości?
Przesunięcie poziome, przesunięcie pionowe, rozmycie, rozprzestrzenienie, a potem kolor.
Co robi ujemne rozprzestrzenienie?
Zmniejsza cień przed rozmyciem, dzięki czemu pozostaje on ciasno pod elementem, zamiast rozlewać się na boki.
Czym jest cień wewnętrzny (inset)?
Cień rysowany wewnątrz elementu, a nie na zewnątrz — używany w wciśniętych przyciskach i polach formularzy.
Czy mogę zrobić cień warstwowy?
Nie bezpośrednio. CSS przyjmuje listę rozdzieloną przecinkami, więc wygeneruj dwa i wklej je razem.