Card Shadow CSS — Subtil casetă-umbră Cod
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 umbre cutie presetată la o umbră clasică de card: 2px în jos, 8px estompare, 15% opacitate neagră. Este în mod deliberat silențios - suficient pentru a separa un card de pagină fără a se anunța - și previzualizarea arată exact cât de liniștit.
Acest interval corespunde celor mai joase trepte de altitudine din majoritatea sistemelor de proiectare: carduri de listă, meniuri drop-down, popovers și rânduri de tabel pe hover. Dacă aveți nevoie de o ridicare mai puternică pentru modal sau panouri plutitoare, creșteți offset-ul Y și estompați împreună - ar trebui să crească proporțional pentru a menține sursa de lumină credibilă.
Copiați linia casetă-umbră în stilurile componente sau duplicați-o ca un al doilea strat cu o estompare mai strânsă pentru a adăuga definiție a marginilor. Instrumentul este gratuit și rulează în întregime în browser.