Generátor sklomorfismu

backdrop-filter: blur() je vlastnost CSS, která stojí za vzhledem matného skla – průsvitný panel, který rozmazává vše, co se za ním hýbe, místo aby jen vybledl plochou barvu. Háček je v tom, že kvalitu rozostření je téměř nemožné posoudit proti statickému vzorníku; čte se jako přesvědčivý pouze tehdy, když se pod ním něco skutečně pohybuje, jako na skutečné stránce s obsahem, videem nebo animovaným hrdinou. Tento generátor umístí kartu náhledu na skutečně animované pozadí místo na statické, takže to, co vidíte při přetahování posuvníků, je to, co návštěvníci skutečně zažijí.

Pozadí je skutečná animace CSS: velký lineární přechod nakreslený na 400 % velikosti prvku, přičemž @keyframes posouvá svou pozici na pozadí tam a zpět ve smyčce – žádná smyčka animace JavaScriptu, žádné plátno, jen stejná technika souvislé pozice na pozadí používaná v produkčních sekcích hrdinů. Rozostření, barevný odstín a neprůhlednost, barva/neprůhlednost/šířka ohraničení, poloměr rohů a měkkost stínů, to vše řídí živé styly plovoucí karty a kopírovatelný rámeček CSS zrcadlí přesně stejné hodnoty.

Ne každý prohlížeč podporuje backdrop-filter, takže generátor také vysílá skutečný blok @supports not (backdrop-filter: blur(1px)) – ne gesto tokenu, ale záložní pravidlo s vlastní barvou pozadí vypočítanou z vašeho skutečného krytí odstínu. Protože průsvitnost bez rozostření vypadá znatelně hůře (ať už je za tím cokoli, ukáže se nerozmazaně), nouzový režim automaticky zvedne alfa kanál nad vámi zvolenou neprůhlednost odstínu a komentář ve vygenerovaném CSS přesně vysvětluje proč a o kolik.

Vše se počítá a vykresluje ve vašem vlastním prohlížeči: žádné nahrávání, žádný účet, žádná zpáteční cesta na server. Zkopírujte CSS, jakmile bude karta vypadat správně, umístěte ji na jakýkoli prvek, který chcete umístit nad fotku, video nebo přechod, a ponechte blok @supports, aby starší prohlížeče stále dostávaly čitelnější, neprůhlednější kartu namísto sotva viditelné.