Glassmorphism-generaattori

backdrop-filter: blur() on CSS-ominaisuus himmeän lasin ulkonäön takana – läpikuultava paneeli, joka sumentaa taustalla liikkuvan sisällön sen sijaan, että se vain haalistaisi tasaista väriä. Sumennuksen laatu on lähes mahdotonta arvioida staattista väripintaa vasten; se vaikuttaa vakuuttavalta vasta, kun jotakin todella liikkuu taustalla – aivan kuten oikealla sivulla, jossa on sisältöä, video tai animoitu hero-osio. Tämä generaattori asettaa esikatselukortin aidosti animoidun taustan eteen pysähtyneen taustan sijaan, joten liukusäätimiä vetäessäsi näet saman kuin kävijäsi.

Tausta on aito CSS-animaatio: suuri linear-gradient, joka on maalattu 400 % elementin koosta, ja @keyframes siirtää sen background-positionia edestakaisin silmukassa – ei JavaScript-animaatiosilmukkaa, ei canvasia, vain sama jatkuva background-position-tekniikka, jota käytetään tuotantohero-osioissa. Sumennus, sävyn väri ja peittävyys, reunan korostuksen väri, peittävyys ja leveys, kulman pyöristys ja varjon pehmeys ohjaavat kaikki leijuvan kortin live-tyylejä, ja kopioitava CSS-ruutu heijastaa täsmälleen samoja arvoja.

Kaikki selaimet eivät tue backdrop-filteriä, joten generaattori tuottaa aidon @supports not (backdrop-filter: blur(1px)) -lohkon – ei vain symbolista elettä, vaan varasäännön, jonka taustaväri on laskettu todellisesta sävyn peittävyydestäsi. Koska läpikuultavuus ilman sumennusta näyttää selvästi huonommalta (taustan sisältö näkyy summentamattomana), varasääntö nostaa automaattisesti alfakanavan valitsemaasi sävyn peittävyyttä korkeammaksi, ja tuotetun CSS:n kommentti selittää tarkalleen miksi ja kuinka paljon.

Kaikki laskenta ja renderöinti tapahtuu omassa selaimessasi: ei latauksia, ei tiliä, ei palvelinkutsuja. Kopioi CSS, kun kortti näyttää oikealta, lisää se mihin tahansa elementtiin, jonka haluat sijoittaa kuvan, videon tai liukuvärjäyksen päälle, ja pidä @supports-lohko mukana, jotta vanhemmat selaimet saavat luettavan, peittävämmän kortin lähes näkymättömän sijaan.