CSS backdrop-filter: nopea huurrelasitausta

CSS backdrop-filter lisää graafisen tehosteen, yleensä sumennuksen, elementin takana olevaan sisältöön. Aseta backdrop-filter: blur(12px) osittain läpinäkyvätaustaiselle elementille. Alla oleva sivu pehmenee navigaatiopalkkien, paneelien ja korttien huurrelasiksi. Kaikki nykyiset selaimet tukevat sitä. Hyvä toteutus pitää alueen pienenä, säteen maltillisena ja varaversion luettavana.

Huurrelasin perusresepti

Lasi syntyy läpikuultavasta täytöstä, sumennuksesta ja heikosta reunasta, joka antaa paneelille muodon. Pieni kylläisyyden lisäys auttaa, sillä sumennus keskiarvoistaa värit odotettua harmaammiksi.

.glass {
  background: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 16px;
}

Lasi näyttää lasilta vain, kun takana on jotain sumennettavaa. Tasaisella harmaalla sivulla paneeli näyttää vain himmeältä. Käytä kuvaa tai rikasta liukuväriä; glassmorfismi selittää tarkemmin.

Mitä backdrop-filter-funktiot tekevät

Ominaisuus hyväksyy samat funktiot kuin filter. Voit ketjuttaa ne yhteen määrittelyyn. Ne suoritetaan vasemmalta oikealle, joten blur() ja sitten saturate() eroaa käänteisestä järjestyksestä. Koko lista on MDN:ssä.

Backdrop-filterin suorituskyky

Sumennus on selaimelle raskas piirrettävä. Sen pitää lukea taustan jokainen pikseli, tutkia säteen sisäiset naapurit ja yhdistää tulos. Työ toistuu aina paneelin takaisen sisällön muuttuessa. Vierittyvän sivun päällä pysyvä otsake piirtää sumennuksen jokaisella ruudulla.

Kustannusta määrää kaksi hallittavaa lukua: elementin alue ja säde. 64 pikselin otsake 12px:n sumennuksella on kevyt lähes kaikille. Koko näytön 40px:n sumennus videon päällä voi pudottaa ruutuja keskitason puhelimessa. CSS-liukuvärien suorituskyky kertoo laajemmin.

Miksi backdrop-filter ei toimi

Kun sumennus ei näytä tekevän mitään, syy löytyy yleensä lyhyestä listasta.

1. 1

   Tarkista taustan läpinäkyvyys

   Tasainen background: #fff peittää sumennetun taustan. Käytä alfaa, kuten rgb(255 255 255 / 0.15).

2. 2

   Lisää Safarin etuliite

   Safari tukee etuliitteetöntä ominaisuutta vasta versiosta 18. Vanhemmat iPhonet tarvitsevat -webkit-backdrop-filter-arvon.

3. 3

   Etsi ylempää backdrop root

   Vanhemman filter, alle 1:n opacity, maski tai oma backdrop-filter rajoittaa lapsen näkemää sisältöä. Lapsi sumentaa vain vanhempaa, mikä voi näyttää vaikutuksettomalta.

4. 4

   Huomioi kiinteät lapsielementit

   Kuten filter, backdrop-filter tekee elementistä kiinteiden ja absoluuttisten lasten sisältävän lohkon. Lasinavigaation kiinteä valikko asettuu otsakkeeseen, ei ikkunaan.

5. 5

   Varmista sisältö taustalla

   Tasaisen värin sumennus ei näy. Vieritä paneeli kuvan päälle ja tarkista toiminta.

Luettavuuden säilyttävä varaversio

Läpikuultava paneeli suunnitellaan sumennuksen varaan. Ilman sitä 14-prosenttinen valkoinen täyttö levottomalla kuvalla romahduttaa tekstikontrastin. Kirjoita ensin luettava versio ja paranna sitä sumennusta tukevissa selaimissa.

/* Works everywhere: opaque enough to read on its own */
.glass {
  background: rgb(15 23 42 / 0.86);
  color: #f8fafc;
}

/* Upgrade where blur is available */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgb(15 23 42 / 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgb(15 23 42 / 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

Tarkista kontrasti taustan pahimmasta kohdasta, älä keskiarvosta. Kirkkaan taivaan yli liikkuva valkoinen lasiotsikko voi jäädä alle värikontrastin ja saavutettavuuden rajojen. brightness(0.7)-tummennus auttaa yleensä varmemmin kuin suurempi sumennus.

Milloin sumennusta ei tarvita

Moni lasipaneeli on vain levottoman taustan tekstin pelastus. Jos saat suunnitella taustan, rauhallisempi ratkaisee ongelman ilman piirtohintaa. Pehmeä vähäkontrastinen pääkuvaliukuväri ei tarvitse paneelia. Katso verkkosivun pääkuvataustat ja sumennetut taustat, joissa sumennus tehdään kuvaan kerran jokaisen ruudun sijaan.

Jälkimmäinen on Gradientlyn tapa pitää teksti luettavana. Mark tuntee sanojen paikat ja siirtää rauhallisimman, parhaiten kontrastoivan alueen niiden taakse. Otsikkoa ei tarvitse pelastaa laatikolla tai sumennuksella.