Insert CSS Box Shadow — Cod gata făcut
Construiți vizual cod CSS cu umbră: glisoare pentru offset, estompare, răspândire, culoare cu opacitate, modul inserție și până la patru straturi cu previzualizare live.
Rezultat
Această pagină deschide generatorul de casete-umbră cu caseta de selectare inserată deja bifată, astfel încât umbra este desenată în interiorul elementului și nu în spatele acestuia. Cardul de previzualizare arată imediat efectul scufundat, iar fiecare glisor continuă să actualizeze linia CSS live.
Umbrele introduse sunt modul în care CSS falsifică adâncimea mergând spre interior: stările butoanelor apăsate, câmpurile de căutare și puțurile de intrare, jgheaburile barei de progres și panourile gravate se bazează toate pe ele. Deoarece umbra îmbrățișează marginea interioară, estomparea și răspândirea se comportă ușor diferit față de o umbră normală - glisoarele de aici vă permit să simțiți imediat această diferență.
Când aspectul scufundat este corect, copiați linia casetă-umbră în foaia de stil. De asemenea, puteți combina un strat de inserție cu straturi exterioare obișnuite - adăugați un al doilea strat și debifați inserția de pe el pentru a le amesteca pe ambele într-o singură declarație.