Generator de sticlămorfism

backdrop-filter: blur() este proprietatea CSS din spatele aspectului de sticlă mată - un panou translucid care estompează orice se mișcă în spatele lui, mai degrabă decât să estompeze o culoare plată. Problema este că calitatea estomparii este aproape imposibil de judecat în raport cu un eșantion static; se citește ca fiind convingător doar odată ce ceva se mișcă de fapt sub el, așa cum se va întâmpla într-o pagină reală cu conținut, videoclip sau un erou animat. Acest generator plasează cardul de previzualizare pe un fundal cu adevărat animat în loc de unul fix, așa că ceea ce vedeți în timp ce trageți glisoarele este ceea ce vor experimenta vizitatorii.

Fundalul este o animație CSS reală: un gradient liniar mare pictat la 400% din dimensiunea elementului, cu @keyframes mutându-și poziția fundalului înainte și înapoi pe o buclă - fără buclă de animație JavaScript, fără pânză, doar aceeași tehnică continuă de poziție a fundalului folosită în secțiunile eroilor de producție. Încețoșarea, nuanța de culoare și opacitatea, culoarea de evidențiere a marginilor/opacitatea/lățimea, raza colțului și umbrele moale, toate conduc stilurile live ale cardului flotant, iar caseta CSS copiabilă oglindește exact aceleași valori.

Nu orice browser acceptă filtrul de fundal, astfel încât generatorul emite și un bloc real @supports not (filtru de fundal: blur(1px)) - nu un gest simbol, ci o regulă de rezervă cu propria culoare de fundal calculată din opacitatea nuanței reale. Deoarece transluciditatea fără încețoșare arată mult mai rău (orice se află în spate se arată prin neclaritate), funcția de rezervă ridică automat canalul alfa deasupra opacității nuanței alese, iar un comentariu în CSS-ul generat explică exact de ce și cât de mult.

Totul se calculează și se redă în propriul browser: fără încărcare, fără cont, fără dus-întors pe server. Copiați CSS-ul odată ce cardul arată corect, plasați-l pe orice element pe care doriți să îl așezați deasupra unei fotografii, a unui videoclip sau a unui gradient și păstrați blocul @supports, astfel încât browserele mai vechi să primească în continuare un card lizibil și mai opac în loc de unul abia vizibil.