Bakteppet-filter CSS-egenskapen

0
57

Jeg hadde aldri hørt om bakteppe-filter eiendom inntil i går, men etter et par timer på å rote rundt med det jeg er positiv til at det er noe mer enn magi. Dette er fordi det legger til filtre (f.eks. endre nyanse, kontrast eller uskarphet) på bakgrunn av et element uten å endre tekst eller andre elementer inni.

Ta dette eksemplet, hvor jeg har kopiert iOS varsling stil: se hvordan bakgrunnen av hver av disse boksene er uklart, men at teksten ikke?

Det er bare en enkelt linje med CSS for å lage den falmet bakgrunn effekt, akkurat som dette:

.varsling {
bakgrunn-filter: blur(3px);
}

Nå er det verdt å merke seg at nettleseren støtte for dette CSS eiendom ikke er spesielt godt støttet ennå (se nedenfor). Men vi har forsøkt å gjøre denne typen filtrering ting for en veldig lang tid, og så er det flott å se at fremgangen blir gjort her. Chris skrev om “frostet glass” teknikk i 2014 og vei tilbake da hadde du til å bruke en haug med rare hacks og ekstra bilder for å gjenskape effekten. Nå kan vi skrive en mye mindre kode for å få samme effekt!

Vi får også til å velge fra en mye mer filtre enn bare det frostet glass stil. Følgende demo viser alle bakteppe-filter verdier og hvordan de endrer bakgrunnen:

Hver av disse boksene er bare separat divs hvor jeg har brukt et annet bakteppe-filter til hver. Og det er det! Jeg slags kan ikke tro hvor enkelt dette er, faktisk.

Selvfølgelig kan du sette dem sammen som så:

.element {
bakgrunn-filter: blur(5px) kontrast(.8);
}

Og dette kan gjøre alle slags sammensatte og komplekse konstruksjoner, spesielt hvis du begynner å kombinere dem sammen med animasjoner.

Men vent, hvorfor gjør vi selv må denne egenskapen? Vel, etter å ha lest opp en liten ser det ut til at den går til standard eksempel er en sperrende av noen beskrivelse. Det er hva Guillermo Esteves var å eksperimentere med tilbake i 2015:

Se Penn PwRPZa av Guillermo Esteves (@gesteves) på CodePen.

Jeg regner med at vi kan gjøre noe mye merkelig og vakrere hvis vi setter våre sinn til det.

Et notat om nettleserstøtte

Bakteppet-filter-egenskapen er ikke godt støttet på tidspunktet for dette skriftlig. Og selv i Safari-der det er støttet, vil du fortsatt trenger å prefiks det. Det er ingen støtte for Firefox i det hele tatt. Men, virkelig, gjøre nettsteder må se akkurat det samme i alle nettlesere?

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
Ingen Ingen Ingen Ingen 17 9*

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
9.0-9.2* Ingen Ingen Ingen Ingen Ingen

Videre lesning

  • bakgrunn-filter på MDN
  • Bygningen iOS-som gjennomsiktighet effekter i CSS med bakteppe-filter