Generátor sklomorfizmu

backdrop-filter: blur() je vlastnosť CSS za vzhľadom matného skla – priesvitný panel, ktorý rozmazáva všetko, čo sa za ním pohne, a nie len vyblednutie plochej farby. Háčik je v tom, že kvalitu rozmazania je takmer nemožné posúdiť podľa statického vzorkovníka; ako presvedčivá sa číta až vtedy, keď sa pod ňou niečo skutočne hýbe, tak ako na skutočnej stránke s obsahom, videom alebo animovaným hrdinom. Tento generátor umiestni náhľadovú kartu na skutočne animované pozadie namiesto statického pozadia, takže to, čo vidíte pri presúvaní posúvačov, je to, čo návštevníci skutočne zažijú.

Pozadie je skutočná animácia CSS: veľký lineárny prechod namaľovaný na 400 % veľkosti prvku, pričom @keyframes posúva svoju pozíciu pozadia dopredu a dozadu v slučke – žiadna slučka animácie JavaScript, žiadne plátno, len rovnaká technika súvislej pozície pozadia, ktorá sa používa v sekciách produkčných hrdinov. Rozmazanie, farebný odtieň a nepriehľadnosť, farba/nepriehľadnosť/šírka okrajov, polomer rohov a jemnosť tieňov – to všetko riadi živé štýly plávajúcej karty a kopírovateľný rámček CSS odráža presne tie isté hodnoty.

Nie každý prehliadač podporuje filter pozadia, takže generátor tiež vysiela skutočný blok @supports not (filter pozadia: blur(1px)) – nie tokenové gesto, ale záložné pravidlo s vlastnou farbou pozadia vypočítanou z vášho skutočného krytie odtieňa. Pretože priesvitnosť bez rozmazania vyzerá zreteľne horšie (čokoľvek za ňou sa ukáže cez nerozmazané), záložný kanál automaticky zvýši alfa kanál nad vami zvolenú nepriehľadnosť odtieňa a komentár vo vygenerovanom CSS presne vysvetlí, prečo a o koľko.

Všetko sa vypočíta a vykreslí vo vašom vlastnom prehliadači: žiadne nahrávanie, žiadny účet, žiadna spiatočná cesta na server. Skopírujte CSS, keď bude karta vyzerať správne, umiestnite ju na ľubovoľný prvok, ktorý chcete umiestniť nad fotografiu, video alebo prechod, a ponechajte blok @supports, aby staršie prehliadače stále mali čitateľnú a nepriehľadnú kartu namiesto sotva viditeľnej.