Klaasmorfismi generaator
Sisestage mattklaaskaart – hägusus, varjund, ääriste esiletõstmine, nurga raadius ja vari –, mille eelvaade hõljub tõeliselt animeeritud taustal, nii et hägususe kvaliteet on liikumisel nähtav.
Tulemus
backdrop-filter: blur() on mattklaasi välimuse taga olev CSS-i omadus – poolläbipaistev paneel, mis hägustab kõik, mis selle taga liigub, mitte ei muuda ühtlast värvi. Konks on selles, et hägususe kvaliteeti on peaaegu võimatu hinnata staatilise proovi järgi; see loetakse veenvaks alles siis, kui midagi selle all tegelikult liigub, nii nagu see toimub sisu, video või animeeritud kangelasega lehel. See generaator asetab eelvaatekaardi liikumatu tausta asemel tõeliselt animeeritud taustale, nii et liugureid lohistades näete seda, mida külastajad tegelikult kogevad.
Taust on tõeline CSS-animatsioon: suur lineaarne gradient, mis on maalitud 400% elemendi suurusest, @keyframes nihutab oma tausta asukohta tsüklil edasi-tagasi – ei JavaScripti animatsioonisilmust ega lõuendit, vaid sama pidev taustapositsiooni tehnika, mida kasutatakse tootmiskangelaste sektsioonides. Hägusus, varjundi värv ja läbipaistmatus, ääriste esiletõstmise värv/läbipaistmatus/laius, nurga raadius ja varjude pehmus juhivad kõik ujuva kaardi reaalajas stiile ning kopeeritav CSS-kast peegeldab täpselt samu väärtusi.
Mitte iga brauser ei toeta taustafiltrit, seega väljastab generaator ka tõelise @supports not (taustadekoratsiooni filter: hägusus(1px)) ploki – mitte märgiliigutus, vaid varureegel, millel on oma taustavärv, mis arvutatakse teie tegeliku varjundi läbipaistmatuse põhjal. Kuna läbipaistvus ilma hägususeta tundub märgatavalt halvem (mis iganes selle taga on, kuvatakse hägustamata kujul), tõstab varufunktsioon alfakanali automaatselt teie valitud varjundi läbipaistmatusest kõrgemale ning genereeritud CSS-i kommentaar selgitab täpselt, miks ja kui palju.
Kõik arvutatakse ja renderdatakse teie brauseris: pole üleslaadimist, kontot ega serveri edasi-tagasi reisi. Kopeerige CSS, kui kaart tundub õige, puista see mis tahes elemendile, mille soovite foto, video või gradiendi kohal asuda, ja hoidke @supports plokk alles, et vanemad brauserid saaksid vaevu nähtava kaardi asemel ikka loetava ja läbipaistmatuma kaardi.
Teie failid ja sisendid ei lahku sellest seadmest kunagi. Töötlemine toimub täiesti võrguühenduseta. 100% turvaline.
Aktsepteeritud vormingud ja reeglid
- Hägusus, varjundi värv/läbipaistmatus, ääriste esiletõstmise värv/läbipaistmatus/laius, nurga raadius ja varjude pehmuse juhtnupud – kõik reaalajas.
- Animeeritud CSS-i gradiendi taust kaardi taga reaalse @keyframes taustapositsiooni silmuse kaudu, nii et jäätunud hägusus on nähtav tõelise liikumise vastu.
- Kopeeritav CSS, mis sisaldab tõelist @supports not (backdrop-filter) varuplokki, millel on automaatselt suurem läbipaistmatus, kommenteeritakse ja selgitatakse.
Peamised eelised
Kasutusjuhtumid
- • Kujundage jäätunud navigeerimisriba või modaalne ülekate ja hinnake hägususe kvaliteeti tasase värvinäidise asemel liikuval taustal.
- • Valige hinnakaardi jaoks peen ääriste esiletõstmine ja varjupehmus ning seejärel kopeerige CSS, mis sisaldab juba vanemate brauserite jaoks graatsilist tagavara.
- • Enne mattklaasist kangelasektsiooni saatmist kontrollige, kui palju peab varjundi läbipaistmatus @supports varuosas suurenema.
Hinda seda tööriista
