Generatore di morfismi del vetro

background-filter: blur() è la proprietà CSS dietro l'aspetto del vetro smerigliato: un pannello traslucido che sfoca tutto ciò che si muove dietro di esso anziché sbiadire semplicemente un colore piatto. Il problema è che è quasi impossibile giudicare la qualità della sfocatura rispetto a un campione statico; risulta convincente solo quando qualcosa si muove effettivamente sotto di esso, come accadrebbe su una pagina reale con contenuti, video o un eroe animato. Questo generatore posiziona la scheda di anteprima su uno sfondo realmente animato anziché fermo, quindi ciò che vedi mentre trascini i cursori è ciò che i visitatori sperimenteranno effettivamente.

Lo sfondo è una vera animazione CSS: un grande gradiente lineare dipinto al 400% della dimensione dell'elemento, con @keyframes che spostano la sua posizione di sfondo avanti e indietro in un ciclo — nessun loop di animazione JavaScript, nessuna tela, solo la stessa tecnica di posizione di sfondo continua utilizzata nelle sezioni degli eroi di produzione. Sfocatura, colore e opacità della tinta, colore/opacità/larghezza dell'evidenziazione del bordo, raggio dell'angolo e morbidezza dell'ombra guidano tutti gli stili live della carta mobile e la casella CSS copiabile rispecchia esattamente gli stessi valori.

Non tutti i browser supportano il filtro dello sfondo, quindi il generatore emette anche un vero blocco @supports not (backdrop-filter: blur(1px)) — non un gesto simbolico, ma una regola di fallback con il proprio colore di sfondo calcolato dall'opacità della tinta effettiva. Poiché la traslucenza senza sfocatura appare notevolmente peggiore (qualunque cosa ci sia dietro viene mostrata senza sfocatura), il fallback aumenta automaticamente il canale alfa sopra l'opacità della tinta scelta e un commento nel CSS generato spiega esattamente perché e in che misura.

Tutto viene calcolato e visualizzato nel tuo browser: nessun caricamento, nessun account, nessun viaggio di andata e ritorno dal server. Copia il CSS una volta che la scheda sembra corretta, rilasciala su qualsiasi elemento che desideri posizionare sopra una foto, un video o un gradiente e mantieni il blocco @supports in modo che i browser più vecchi ottengano ancora una scheda leggibile e più opaca anziché appena visibile.