De achtergrond-filter CSS eigenschap

0
45

Ik had nog nooit gehoord van de achtergrond-filter eigendom tot gisteren, maar na een paar uur stoeien met het ik weet zeker dat het niets meer is dan magie. Dit is, omdat het bijdraagt filters (zoals het veranderen van de kleurtoon, contrast of vervagen van de achtergrond van een element zonder het wijzigen van de tekst of andere elementen in.

Neem dit voorbeeld, waarbij ik heb gerepliceerd het iOS notification stijl: zie hoe de achtergrond van elk van deze vakken worden wazig, maar de tekst niet?

Dat is maar één regel CSS te maken dat vervaagde achtergrond effect, net als deze:

.kennisgeving {
achtergrond-filter: blur(3px);
}

Nu is het vermeldenswaard dat de browser ondersteuning voor deze CSS-eigenschap is niet bijzonder goed ondersteund gewoon nog niet (zie hieronder). Maar we hebben geprobeerd te doen dit soort filtering spullen voor een heel lange tijd en het is dus geweldig om te zien dat er vorderingen worden gemaakt hier. Chris schreef over de “mat-glas” techniek in 2014 en de weg terug dan u had voor het gebruik van een stel vreemde hacks en extra afbeeldingen in het repliceren van het effect. Nu kunnen we schrijven een stuk minder code om hetzelfde effect te krijgen!

Ook krijgen We te kiezen uit een veel meer filters dan dat mat glas-stijl. De volgende demo toont alle achtergrond-filter waarden en hoe ze veranderen van de achtergrond:

Elk van deze vakken zijn net gescheiden divs waar ik heb gesolliciteerd een verschillende achtergrond-filter. En dat is het! Ik kan ook niet echt geloven hoe eenvoudig dit is, eigenlijk.

Natuurlijk kunt u ze aan elkaar als ketting dus:

.element {
achtergrond-filter: blur(5px) contrast(.8);
}

En dit kan allerlei ingewikkelde en complexe ontwerpen, vooral als u ze combineert samen met animaties.

Maar wacht, waarom doen we het zelfs nodig deze woning? Nou, na het lezen een beetje het lijkt erop dat de ga-naar-standaard voorbeeld is een modaal van een omschrijving. Dat is wat Guillermo Esteves was aan het experimenteren met de rug in 2015:

Zie de Pen PwRPZa door Guillermo Esteves (@gesteves) op CodePen.

Ik denk dat we kunnen doen, iets dat nog veel vreemder en mooier als we onze geest.

Een opmerking over de browser ondersteuning

De achtergrond-eigenschap filter wordt niet goed ondersteund op het moment van dit schrijven. En zelfs in Safari, waar het wordt ondersteund, moet u nog voorvoegsel. Er is geen ondersteuning voor Firefox. Maar, echt, doe je een website moet er precies hetzelfde uitzien in elke browser?

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
Geen Geen Geen Geen 17 9*

Mobiele / Tablet

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

Verder lezen

  • achtergrond-filter op MDN
  • Gebouw iOS-achtige transparantie-effecten in CSS met achtergrond-filter