Üvegmorfizmus generátor
Tárcsázzon be egy mattüveg kártyát – elmosódás, színárnyalat, szegélykiemelés, saroksugár és árnyék –, amelynek előnézete egy valóban animált háttér felett lebeg, így az elmosódás minősége mozgás közben is látható.
Eredmény
backdrop-filter: A blur() a mattüveg megjelenés mögött meghúzódó CSS-tulajdonság – egy áttetsző panel, amely elhomályosítja a mögötte mozgó dolgokat, nem csak egy lapos színt. A bökkenő az, hogy az elmosódás minőségét szinte lehetetlen megítélni egy statikus színminta alapján; csak akkor tekinthető meggyőzőnek, ha valami valóban mozog alatta, úgy, ahogyan egy valódi oldalon, tartalommal, videóval vagy animált hőssel. Ez a generátor az előnézeti kártyát egy valóban animált háttérre helyezi az állókép helyett, így a csúszkák húzása közben azt látja, amit a látogatók ténylegesen megtapasztalnak.
A háttér egy igazi CSS-animáció: egy nagy lineáris gradiens az elem méretének 400%-ára festve, a @keyframes egy hurkon előre-hátra mozgatja a háttérpozícióját – nincs JavaScript-animációs hurok, nincs vászon, csak ugyanaz a folyamatos háttérpozíció-technika, amelyet az éles hősszekciókban használnak. Az elmosódás, a színárnyalat és az átlátszatlanság, a szegély kiemelésének színe/átlátszatlansága/szélessége, a saroksugár és az árnyék lágysága mind a lebegő kártya élő stílusát vezérlik, a másolható CSS doboz pedig pontosan ugyanazokat az értékeket tükrözi.
Nem minden böngésző támogatja a háttérszűrőt, így a generátor egy valódi @supports not (backdrop-filter: blur(1px)) blokkot is kibocsát – ez nem egy jelképes gesztus, hanem egy tartalékszabály, amelynek saját háttérszíne az Ön tényleges árnyalati átlátszatlanságából számítható ki. Mivel az elmosódás nélküli áttetszőség észrevehetően rosszabbnak tűnik (bármi is van mögötte, az elmosódottan látszik), a tartalék automatikusan a választott árnyalati átlátszatlanság fölé emeli az alfa-csatornát, és a generált CSS-ben egy megjegyzés pontosan elmagyarázza, miért és mennyivel.
Minden a saját böngészőjében történik: nincs feltöltés, nincs fiók, nincs oda-vissza út a szerverre. Másolja ki a CSS-t, ha a kártya megfelelőnek tűnik, ejtse el bármely olyan elemre, amelyet egy fotó, videó vagy színátmenet fölé szeretne helyezni, és tartsa meg a @supports blokkot, hogy a régebbi böngészők továbbra is olvasható, átlátszatlanabb kártyát kapjanak az alig látható kártya helyett.
A fájljaid és bemeneteid soha nem hagyják el ezt az eszközt. A feldolgozás teljesen offline módon történik. 100% biztonságos.
Elfogadott formátumok és szabályok
- Életlenítés, árnyalat színe/átlátszatlansága, szegélykiemelés színe/átlátszatlansága/szélessége, saroksugár és árnyékok lágyságának vezérlői, mindez élőben.
- Animált CSS gradiens háttér a kártya mögött egy valódi @keyframes háttérpozíció hurkon keresztül, így a fagyos elmosódás látható a valódi mozgás ellen.
- Másolható CSS, beleértve egy valódi @supports not (backdrop-filter) tartalék blokkot, automatikusan nagyobb átlátszatlansággal, megjegyzésekkel és magyarázatokkal.
Főbb előnyök
Felhasználási területek
- • Tervezzen matt navigációs sávot vagy modális fedvényt, és ítélje meg az elmosódás minőségét mozgó háttér alapján, ne egy lapos színmintát.
- • Tárcsázza be a finom szegélykiemelést és az árnyak lágyságát az árkártyához, majd másolja ki a CSS-t, amely már tartalmaz egy kecses tartalékot a régebbi böngészőkhöz.
- • Ellenőrizze, hogy egy árnyalat átlátszatlanságának mennyivel kell növekednie a @supports tartalékban, mielőtt egy mattüveg hős részt szállítana.
Értékelje ezt az eszközt
