Generator Glassmorphism

backdrop-filter: blur() je lastnost CSS, ki ustvari videz motnega stekla – prosojno ploščo, ki zamegli vse, kar se premika za njo, namesto da bi le zbledela ravno barvo. Težava je v tem, da je kakovost zamegljenosti skoraj nemogoče oceniti na statičnem vzorcu; prepričljiva postane šele, ko se nekaj za njo dejansko premika, tako kot bo na pravi strani z vsebino, videom ali animiranim uvodnim delom. Ta generator postavi predogledno kartico nad pristno animirano ozadje namesto nad mirujočega, zato je to, kar vidite med premikanjem drsnikov, tisto, kar bodo obiskovalci zares izkusili.

Ozadje je resnična CSS-animacija: velik linearni gradient, narisan na 400 % velikosti elementa, pri čemer @keyframes v zanki premikajo njegov background-position naprej in nazaj – brez JavaScript animacijske zanke, brez platna, le ista tehnika neprekinjenega background-position, ki se uporablja v produkcijskih uvodnih delih. Zamegljenost, barva in prosojnost odtenka, barva, prosojnost in debelina poudarka obrobe, zaobljenost robov in mehkoba sence poganjajo žive sloge lebdeče kartice, polje s CSS za kopiranje pa zrcali natanko iste vrednosti.

Vsi brskalniki ne podpirajo backdrop-filter, zato generator ustvari tudi pravi blok @supports not (backdrop-filter: blur(1px)) – ne zgolj simbolične geste, temveč pravilo za odmik z lastno barvo ozadja, izračunano iz vaše dejanske prosojnosti odtenka. Ker je prosojnost brez zamegljenosti videti občutno slabše (karkoli je za njo, se vidi nezamegljeno), odmik samodejno zviša kanal alfa nad izbrano prosojnost odtenka, komentar v ustvarjenem CSS pa natančno pojasni, zakaj in za koliko.

Vse se izračuna in upodobi v vašem brskalniku: brez nalaganja, brez računa, brez pošiljanja na strežnik. Ko je kartica videti prava, kopirajte CSS, ga dodajte poljubnemu elementu, ki naj se nahaja nad fotografijo, videom ali gradientom, in obdržite blok @supports, da starejši brskalniki še vedno dobijo berljivo, bolj neprozorno kartico namesto komaj vidne.