Lasimorfismin generaattori
Soita himmeä lasikortti – sumennus, sävy, reunan korostus, kulman säde ja varjo – esikatsella kelluvan aidon animoidun taustan päällä, jotta sumennuksen laatu näkyy liikkeessä.
Tulos
backdrop-filter: blur() on himmeän lasin taustalla oleva CSS-ominaisuus – läpikuultava paneeli, joka sumentaa kaiken takanaan liikkuvan sen sijaan, että se haalistuu tasaista väriä. Saavute on siinä, että epäterävyyden laatua on lähes mahdotonta arvioida staattista swatchia vastaan. se on vakuuttava vain, kun jokin todella liikkuu sen alla, kuten se liikkuu todellisella sivulla, jolla on sisältöä, videota tai animoitua sankaria. Tämä generaattori asettaa esikatselukortin aidon animoidun taustan päälle pysäytyskuvan sijaan, joten vierailijat kokevat sen, mitä näet liukusäätimiä vetäessäsi.
Tausta on todellinen CSS-animaatio: suuri lineaarinen gradientti, joka on maalattu 400 %:iin elementin koosta, ja @keyframes siirtää tausta-asemaansa edestakaisin silmukassa – ei JavaScript-animaatiosilmukkaa, ei kangasta, vain sama jatkuva tausta-asentotekniikka, jota käytetään tuotannon sankariosissa. Sumeus, sävytysväri ja peittävyys, reunan korostuksen väri/läpinäkymättömyys/leveys, kulman säde ja varjon pehmeys ohjaavat kaikki kelluvan kortin live-tyylejä, ja kopioitava CSS-laatikko heijastaa täsmälleen samoja arvoja.
Kaikki selaimet eivät tue taustasuodatinta, joten generaattori lähettää myös todellisen @supports not (backdrop-filter: blur(1px)) -lohkon – ei merkkiele, vaan varasäännön, jolla on oma taustaväri, joka on laskettu todellisesta sävyn läpinäkyvyydestäsi. Koska läpikuultavuus ilman sumennusta näyttää huomattavasti heikommalta (mikä sen takana näkyy sumentamattomana), varatoiminto nostaa alfakanavan automaattisesti valitsemasi sävyn peittävyyden yläpuolelle, ja luodun CSS:n kommentti selittää tarkalleen miksi ja kuinka paljon.
Kaikki lasketaan ja renderöidään omassa selaimessasi: ei latausta, ei tiliä, ei edestakaista palvelinta. Kopioi CSS, kun kortti näyttää oikealta, pudota se mille tahansa elementille, jonka haluat sijoittaa valokuvan, videon tai liukuvärin yläpuolelle, ja säilytä @supports-lohko, jotta vanhemmat selaimet saavat edelleen luettavan, läpinäkymättömämmän kortin tuskin näkyvän kortin sijaan.
Tiedostosi ja syötteesi eivät koskaan poistu tältä laitteelta. Käsittely toimii täysin offline-tilassa. 100 % turvallinen.
Hyväksytyt muodot ja säännöt
- Epäterävyyden, sävyn värin/läpinäkyvyyden, reunan korostuksen väri/läpinäkymättömyys/leveys, kulman säteen ja varjon pehmeyden säätimet, kaikki livenä.
- Animoitu CSS-gradienttitausta kortin takana todellisen @keyframes-taustasijaintisilmukan kautta, joten himmeä sumennus näkyy aitoa liikettä vastaan.
- Kopioitava CSS, joka sisältää todellisen @supports not (backdrop-filter) -varalohkon, jolla on automaattisesti suurempi läpinäkyvyys, kommentoi ja selitetään.
Tärkeimmät edut
Käyttötapaukset
- • Suunnittele himmeä navigointipalkki tai modaalinen peittokuva ja arvioi sumennuksen laatu liikkuvaa taustaa vasten tasaisen värimallin sijaan.
- • Valitse hienovarainen reunan korostus ja varjon pehmeys hintakorttia varten ja kopioi sitten CSS, joka sisältää jo sulavan varavaihtoehdon vanhemmille selaimille.
- • Tarkista, kuinka paljon sävyn peittävyyden täytyy kasvaa @supports-varassa ennen himmeän lasin heroosion lähettämistä.
Arvioi tämä työkalu
