CSS Box Shadow Generator
Što je CSS Box Shadow?
CSS svojstvo box-shadow dodaje efekte sjene oko okvira elementa. Sjene se mogu pomicati, zamućivati, širiti, bojiti i postaviti kao inset (unutarnja sjena). Više sjenki odvojenih zarezima može se slagati za bogate efekte. Ovaj generator vam omogućuje vizualno izgradnju složenih višeslojnih sjenki i kopiranje CSS-a spremnog za lijepljenje u međuspremnik.
Kako koristiti Box Shadow Generator
-
Prilagodite klizače za Offset X/Y, Blur i Spread za postavljanje i oblikovanje sjene.
-
Kliknite na uzorak boje za odabir boje sjene i koristite klizač Opacity za prozirnost.
-
Uključite 'Inset' za stvaranje unutarnjeg sjaja ili efekta pritisnutosti.
-
Kliknite '+ Dodaj sloj' za slaganje više sjenki jedne na drugu.
-
Kopirajte generirani CSS i zalijepite ga u svoju stilsku datoteku.
Često postavljana pitanja
Koja je razlika između box-shadow i drop-shadow filtera? box-shadow dodaje sjene oko pravokutnog okvira elementa i podržava unutarnje sjene. CSS filter: drop-shadow() primjenjuje se na vizualni oblik elementa (uključujući prozirnost), što ga čini da prati nepravokutne konture poput PNG-a s prozirnom pozadinom.
Kako mogu stvoriti Material Design efekt dizanja kartice? Naslagajte dvije box sjene: mekanu ambijentnu sjenu (veliki blur, niska neprozirnost, blago proširenje) i ključnu sjenu (manji blur, viša neprozirnost, usmjereni pomak). Na primjer: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).
Utječe li box-shadow na raspored stranice? Ne. box-shadow ne utječe na veličinu ili položaj elementa u toku dokumenta. Za razliku od outline, ne zauzima prostor rasporeda i neće gurnuti druge elemente.
Mogu li animirati box-shadow? Da. box-shadow se može animirati s CSS prijelazima i animacijama. Za performanse, radije prijeđite na box-shadow samo kada je potrebno — preglednici ne mogu ubrzati promjene box-shadow s GPU-om onako kako čine za transform ili opacity.
Keywords: CSS box shadow generator, box-shadow CSS, CSS alat za sjenu, CSS drop shadow, unutarnja sjena, višeslojna sjena, CSS shadow online