CSS-lasimorfismigeneraattori

Tämä työkalu rakentaa CSS-huurrelasi- (lasimorfismi-) tehosteen yhdistämällä puoliläpinäkyvän taustan backdrop-filter: blur() -ominaisuuteen — vedä liukusäätimiä värikkään esikatselun päällä nähdäksesi lasikortin sumentavan taustallaan olevan sisällön, ja kopioi sitten CSS. Se tulostaa myös -webkit-backdrop-filter-etuliitteen, jota Safari tarvitsee, koska backdrop-filter vaatii sen siellä yhä.

Mikä tämä työkalu on?

Lasimorfismi on käyttöliittymätyyli, jossa elementti näyttää huurrelasilta: puoliläpinäkyvä tausta päästää sen takana olevat värit näkymään läpi, kun taas backdrop-filter: blur() sumentaa tuon taustan, jotta se lukeutuu lasiksi eikä tavalliseksi läpinäkyväksi paneeliksi. Ohut, puoliläpinäkyvä reunus ja pyöristetyt kulmat viimeistelevät yleensä ilmeen.

Tämä työkalu antaa sinun rakentaa tuon tehosteen visuaalisesti. Esikatselu on liikkuvan liukuvärin päällä nimenomaan, jotta sumennus näkyy — lasimorfismi lukeutuu oikein vain jonkin väriä tai yksityiskohtia sisältävän asian päällä, ei tasaisen valkoisen sivun päällä. Säädä taustavärin läpinäkyvyyttä, sumennuksen voimakkuutta, reunuksen läpinäkyvyyttä ja kulmasädettä, ja kopioi sitten luotu CSS.

Lähde: Filter Effects Module Level 1, W3C — määrittelee backdrop-filterin, ominaisuuden, johon tämä tehoste perustuu.

Miksi käyttää sitä?

Live-esikatselu värikkään animoidun taustan päällä, joten näet oikeasti huurrelasitehosteen sen sijaan, että arvailisit sumennusarvoja tyhjää taustaa vasten.
Täysi hallinta taustan läpinäkyvyydestä, taustan sumennusvoimakkuudesta, reunuksen läpinäkyvyydestä ja border-radiuksesta yhdessä paikassa.
Tulostaa sekä backdrop-filterin että -webkit-backdrop-filter-etuliitteen automaattisesti, joten et unohda Safari-tukea.
Toimii kokonaan selaimessasi — mitään määrittämääsi ei ladata minnekään.
Ilmainen, ei rekisteröitymistä, toimii mobiilissa.

Käyttöohje

Valitse taustaväri ja säädä sen läpinäkyvyyttä — alhainen läpinäkyvyys (10–25 %) lukeutuu lasiksi; korkeampi läpinäkyvyys näyttää enemmän kiinteältä sävytetyltä paneelilta.
Kasvata sumennuksen voimakkuutta sumentaaksesi elementin takana olevaa — tämä on se, mikä oikeasti luo huurrelasin ilmeen, eri asia kuin pelkkä läpinäkyvyys.
Säädä reunuksen läpinäkyvyyttä lisätäksesi hienovaraisen valoreunan, mikä auttaa lasikorttia lukeutumaan erilliseksi pinnaksi taustaan sulautumisen sijaan.
Aseta border-radius pyöristetyille kulmille — lasimorfismikortit ovat lähes aina pyöristettyjä, harvoin teräväkulmaisia.
Kopioi luotu CSS ja liitä se tyylitiedostoosi. Muista, että elementti tarvitsee taustallaan jotain väriä tai tekstuuria sisältävää — lasimorfismi on näkymätön tasaisen, yksivärisen taustan päällä.

Esimerkki

Syöte

Tausta: valkoinen 20 % läpinäkyvyydellä · Sumennus: 10px · Reunuksen läpinäkyvyys: 30 % · Säde: 16px

Tuloste

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Klassinen huurrelasikorttityyli, jota käytetään kirjautumispaneeleissa, navigointipalkeissa ja hallintapaneelien widgeteissä värikkään tai valokuvataustan päällä.

Safari ja selaintuki

backdrop-filter tuetaan nykyisissä Chrome-, Firefox-, Edge- ja Safari-selaimissa, mutta Safari on historiallisesti vaatinut -webkit-backdrop-filter-etuliitteen rinnalla varsinaisen ominaisuuden kanssa sumennuksen renderöimiseksi — ilman sitä vanhemmat Safari-versiot ohittavat sumennuksen hiljaisesti ja näyttävät vain tasaisen läpinäkyvän taustan. Tämä työkalu tulostaa siksi aina molemmat määritykset.

Katso MDN:n backdrop-filter-dokumentaatio nykyisistä selainyhteensopivuustiedoista: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Miksi lasimorfismi tarvitsee jotain taustalleen

backdrop-filter sumentaa vain sen, mikä on visuaalisesti elementin takana — taustakuvan, liukuvärin, toisen värillisen elementin tai vierittyvän sisällön alla. Tasaisen valkoisen tai yksivärisen taustan päällä ei ole mitään sumennettavaa, joten tehoste on näkymätön ja elementti näyttää vain hieman sävytetyltä, pyöristetyltä laatikolta. Aseta lasimorfismielementit aina liukuvärin, valokuvan tai muuten vilkkaan taustan päälle, jotta tehoste lukeutuu.

Yhdistäminen muihin CSS-tehosteisiin

Lasimorfismikortit yhdistävät yleisesti hienovaraisen box-shadow'n alle lisäsyvyyden vuoksi. Luo huurrelasi-CSS tässä, lisää sitten pehmeä varjo Box Shadow -generaattorilla ja käytä molempia määrityksiä samaan elementtiin.

→ Box Shadow -generaattori · Border Radius -generaattori

Usein kysytyt kysymykset

Miksi lasitehoste ei näy sivullani?

backdrop-filter sumentaa sen, mikä on elementin takana. Jos elementtisi on tasaisen valkoisen tai yksivärisen taustan päällä, sumennettavaa visuaalisesti kiinnostavaa ei ole, joten se näyttää vain haaleasti sävytetyltä laatikolta. Sijoita se liukuvärin, kuvan tai muun yksityiskohtaisen taustan päälle, jotta huurrelasitehoste näkyy.

Tarvitsenko -webkit-backdrop-filter-etuliitteen?

Kyllä, jos haluat tehosteen renderöityvän luotettavasti Safarissa. Tämä työkalu tulostaa aina sekä standardin backdrop-filterin että -webkit--etuliitteellisen version yhdessä, koska Safari on historiallisesti tarvinnut etuliitteen sumennuksen soveltamiseen.

Mitä eroa on taustan läpinäkyvyydellä ja sumennuksella?

Taustan läpinäkyvyys hallitsee, kuinka paljon valitsemastasi sävytysväristä näkyy verrattuna siihen, kuinka paljon takana olevasta näkyy läpi muuttumattomana. Sumennus hallitsee, kuinka paljon tuota näkyvää taustaa tahritaan/pehmennetään. Lasimorfismi käyttää molempia yhdessä — hieman läpinäkyvyyttä plus hieman sumennusta — pelkän jommankumman sijaan.

Voinko käyttää backdrop-filteriä millä tahansa elementillä?

Kyllä, mutta se vaikuttaa vain siihen, mikä on visuaalisesti sen takana sivun renderöinnissä, ei elementin omiin lapsielementteihin. Sillä on myös suorituskykykustannus joillain laitteilla, kun sitä sovelletaan moniin elementteihin tai animoidaan usein, joten se on parhaiten käytettävissä pienelle määrälle näkyviä käyttöliittymäpintoja, kuten kortteja, modaaleja tai navigointipalkkeja, ei kymmeniin pieniin elementteihin.

Miksi reunukseni tuskin näkyy?

Tämän työkalun reunus käyttää puoliläpinäkyvää valkoista, mikä on tarkoituksella hienovarainen — kevyt reuna, joka auttaa lasipaneelia lukeutumaan erilliseksi pinnaksi ilman että se näyttää kovalta, läpinäkymättömältä ääriviivalta. Nosta reunuksen läpinäkyvyysliukusäädintä, jos haluat näkyvämmän reunan.