Glassmorphismi generaator
Sea paika jäätunud klaasist kaart – udusus, toon, ääre esiletõst, nurga raadius ja vari –, mida kuvatakse eelvaates tõeliselt animeeritud tausta kohal, nii et udususe kvaliteet on liikumises nähtav.
🔒 Töödeldud täielikult teie brauseris – midagi, mida siia sisestate, ei laadita kunagi üles.
Tulemus
backdrop-filter: blur() on CSS-omadus, mis loob jäätunud klaasi välimuse – poolläbipaistev paneel, mis hägustab selle taga liikuvat sisu, mitte ei tuhmista vaid tasast värvi. Konks on selles, et udususe kvaliteeti on staatilise värvinäidise pealt peaaegu võimatu hinnata; see tundub veenev alles siis, kui midagi selle taga tõesti liigub, nii nagu see juhtub päris lehel, kus on sisu, video või animeeritud avapilt. See generaator asetab eelvaatekaardi tõeliselt animeeritud tausta kohale, mitte paigalseisva tausta peale, nii et see, mida liugureid lohistades näed, ongi see, mida külastajad tegelikult kogevad.
Taust on tõeline CSS-animatsioon: suur linear-gradient, mis on maalitud elemendi suurusest 400% ulatuses, ja @keyframes nihutab selle background-position-i edasi-tagasi tsüklis – ei mingit JavaScripti animatsioonitsüklit, ei canvas't, vaid seesama pidev background-position tehnika, mida kasutatakse tootmiskeskkonna avapiltides. Udusus, tooni värv ja läbipaistmatus, ääre esiletõstu värv/läbipaistmatus/laius, nurga raadius ja varju pehmus juhivad kõik hõljuva kaardi elavaid stiile ning kopeeritava CSS-i kast peegeldab täpselt samu väärtusi.
Kuna kõik brauserid ei toeta backdrop-filter-it, genereerib see tööriist ka tõelise @supports not (backdrop-filter: blur(1px)) ploki – mitte sümboolse žestina, vaid varutoimingu reeglina, millel on oma taustavärv, arvutatuna sinu tegelikust tooni läbipaistmatusest. Kuna poolläbipaistvus ilma udususeta näeb märgatavalt halvem välja (mis iganes selle taga on, paistab udustamata läbi), tõstab varutoiming automaatselt alfakanalit üle sinu valitud tooni läbipaistmatuse ja genereeritud CSS-is olev kommentaar selgitab täpselt, miks ja kui palju.
Kõik arvutatakse ja renderdatakse sinu enda brauseris: ei üleslaadimist, ei kontot, ei serveripöördust. Kopeeri CSS, kui kaart näeb õige välja, aseta see suvalisele elemendile, mis peaks asuma foto, video või gradiendi kohal, ja säilita @supports plokk, et vanemad brauserid saaksid endiselt loetava, läbipaistmatuma kaardi, mitte vaevu nähtava.