Üvegmorfizmus Generátor
Állíts be egy mattüveg kártyát – elmosás, színezet, keret kiemelés, saroklekerekítés és árnyék –, az előnézet valóban animált háttér felett lebeg, így az elmosás minősége mozgás közben látható.
🔒 Teljesen a böngészőjében dolgozzák fel – soha semmi, amit itt beírt, nem kerül feltöltésre.
Eredmény
A backdrop-filter: blur() a mattüveg hatás mögötti CSS tulajdonság – egy áttetsző panel, amely elmossa a mögötte mozgó tartalmat, ahelyett, hogy csak egy sík színt halványítana. A nehézség az, hogy az elmosás minőségét szinte lehetetlen megítélni egy statikus színminta előtt; csak akkor tűnik meggyőzőnek, ha valami tényleg mozog mögötte, ahogy az egy valódi oldalon is történik, ahol tartalom, videó vagy animált fejléc van. Ez a generátor az előnézeti kártyát valóban animált háttér fölé helyezi statikus helyett, így amit a csúszkák húzása közben látsz, az lesz az, amit a látogatók is tapasztalni fognak.
A háttér egy valódi CSS animáció: egy nagy linear-gradient, amely az elem méretének 400%-ára van festve, és egy @keyframes ciklus mozgatja a background-position-t oda-vissza – nincs JavaScript animációs ciklus, nincs canvas, csak ugyanaz a folyamatos background-position technika, amelyet éles fejlécekben használnak. Az elmosás, a színezet színe és átlátszósága, a keret kiemelés színe/átlátszósága/vastagsága, a saroklekerekítés és az árnyék lágysága mind a lebegő kártya élő stílusát vezérlik, és a másolható CSS mező pontosan ugyanazokat az értékeket tükrözi.
Nem minden böngésző támogatja a backdrop-filter-t, ezért a generátor egy valódi @supports not (backdrop-filter: blur(1px)) blokkot is kiad – nem jelképes megoldást, hanem egy olyan fallback szabályt, amelynek saját háttérszíne a tényleges színezet átlátszóságából van kiszámítva. Mivel az áttetszőség elmosás nélkül észrevehetően rosszabbul néz ki (a mögötte lévő tartalom életlenül látszik át), a fallback automatikusan megnöveli az alfa csatornát a választott színezet átlátszósága fölé, és egy megjegyzés a generált CSS-ben pontosan elmagyarázza, hogy miért és mennyivel.
Minden számítás és megjelenítés a saját böngésződben történik: nincs feltöltés, nincs fiók, nincs szerver kapcsolat. Másold ki a CSS kódot, amikor a kártya jól néz ki, illeszd be bármely elemre, amelyet fotó, videó vagy színátmenet fölé szeretnél helyezni, és tartsd meg a @supports blokkot, hogy a régebbi böngészők is egy olvasható, átlátszatlanabb kártyát kapjanak egy alig látható helyett.