Generator steklomorfizma

backdrop-filter: blur() je lastnost CSS za videzom motnega stekla – prosojno ploščo, ki zamegli vse, kar se premika za njo, namesto da samo zbledi gladko barvo. Ulov je v tem, da je skoraj nemogoče oceniti kakovost zamegljenosti glede na statični vzorec; bere se kot prepričljiv šele, ko se nekaj dejansko premika pod njim, tako kot se bo na resnični strani z vsebino, videom ali animiranim junakom. Ta generator postavi kartico za predogled na resnično animirano ozadje namesto na mirujoče, tako da bodo obiskovalci dejansko izkusili tisto, kar vidite med vlečenjem drsnikov.

Ozadje je prava animacija CSS: velik linearni gradient, naslikan na 400 % velikosti elementa, pri čemer @keyframes premika svoj položaj ozadja naprej in nazaj v zanki – brez animacijske zanke JavaScript, brez platna, samo enaka tehnika neprekinjenega položaja ozadja, ki se uporablja v odsekih junakov produkcije. Zameglitev, barvni odtenek in motnost, barva/neprosojnost/širina poudarka obrobe, radij vogalov in mehkoba sence – vse to poganja žive sloge lebdeče kartice, polje CSS, ki ga je mogoče kopirati, pa odraža popolnoma enake vrednosti.

Vsak brskalnik ne podpira filtra za ozadje, zato generator oddaja tudi pravi blok @supports not (filter za ozadje: zamegljenost(1px)) – ne žetonska poteza, ampak nadomestno pravilo z lastno barvo ozadja, izračunano iz vaše dejanske motnosti odtenka. Ker je prosojnost brez zamegljenosti videti opazno slabša (karkoli je zadaj, se vidi nezamegljeno), nadomestni način samodejno dvigne kanal alfa nad vašo izbrano motnost odtenka, komentar v ustvarjenem CSS pa natančno pojasni, zakaj in za koliko.

Vse se izračuna in upodablja v vašem brskalniku: brez nalaganja, brez računa, brez povratnega obiska strežnika. Kopirajte CSS, ko je kartica videti pravilna, jo spustite na kateri koli element, ki ga želite postaviti nad fotografijo, videoposnetek ali gradient, in obdržite blok @supports, tako da starejši brskalniki še vedno dobijo berljivo, bolj neprozorno kartico namesto komaj vidne.