DevTulz Online

Generator CSS Box Shadow

Ozadje

Kaj je CSS Box Shadow?

Lastnost CSS box-shadow dodaja učinke sence okoli okvirja elementa. Sence so lahko zamaknjene, zamegljene, razširjene, obarvane in nastavljene kot inset (notranja senca). Več senc, ločenih z vejicami, je mogoče plastiti za bogate učinke. Ta generator vam omogoča vizualno gradnjo zapletenih večplastnih senc in kopiranje CSS-a, pripravljenega za lepljenje, v odložišče.

Kako uporabljati Generator Box Shadow

  1. Prilagodite drsniki za Offset X/Y, Blur in Spread za pozicioniranje in oblikovanje sence.

  2. Kliknite na barvni vzorec za izbiro barve sence in uporabite drsnik Opacity za prosojnost.

  3. Preklopite 'Inset' za ustvarjanje notranjega sijaja ali učinka pritiska.

  4. Kliknite '+ Dodaj plast' za plastenje več senc ena na drugo.

  5. Kopirajte ustvarjeni CSS in ga prilepite v svojo stilsko datoteko.

Pogosto zastavljena vprašanja

Kakšna je razlika med box-shadow in drop-shadow filtrom? box-shadow doda sence okoli pravokotnega robnega polja elementa in podpira vgrajene sence. CSS filter: drop-shadow() se nanaša na vizualni oblik elementa (vključno s prosojnostjo), kar mu omogoča sledenje nepravokotnim obrisom, kot so PNG slike s prosojnim ozadjem.

Kako ustvarim učinek dviga kartic Material Design? Preložite dve senci box-shadow: mehko ambientno senco (veliko zabrisan, nizka neprosojnost, rahlo razširjena) in ključno senco (manjša zabrisanost, višja neprosojnost, smerski premik). Na primer: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Ali box-shadow vpliva na postavitev strani? Ne. box-shadow ne vpliva na velikost ali položaj elementa v toku dokumenta. Za razliko od outline ne zavzame prostora v postavitvi in ne bo potiskala drugih elementov naokoli.

Ali lahko animiram box-shadow? Da. box-shadow je mogoče animirati z CSS prehodi in animacijami. Za delovanje je bolje prehod box-shadow izvedite samo, če je to potrebno — brskalniki ne morejo GPU-pospešiti sprememb box-shadow tako učinkovito kot transform ali opacity.

Keywords: generator CSS box shadow, box-shadow CSS, orodje za senco CSS, CSS drop shadow, notranja senca, večplastna senca, CSS shadow online