CSS-filters zijn een krachtig hulpmiddel dat auteurs kunnen gebruiken om verschillende visuele effecten te bereiken (vergelijkbaar met Photoshop-filters voor de browser). De CSS- filtereigenschap biedt toegang tot effecten zoals vervaging of kleurverschuiving op de weergave van een element voordat het element wordt weergegeven. Filters worden vaak gebruikt om de weergave van een afbeelding, een achtergrond of een rand aan te passen.
De syntaxis is:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Er zijn een aantal functies die u kunt gebruiken voor de waarde:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- voor het toepassen van SVG-filterscustom()- "binnenkort beschikbaar"
Meerdere functies kunnen worden gebruikt, spaties gescheiden.
.do-more-things ( filter: blur(20px) grayscale(20%); )Filterfuncties
Om de CSS-filtereigenschap te gebruiken, specificeert u een waarde voor een van de volgende hierboven genoemde functies. Als de waarde ongeldig is, retourneert de functie 'geen'. Behalve waar aangegeven, accepteren de functies die een waarde hebben uitgedrukt met een procentteken (zoals in 34%) ook de waarde uitgedrukt als decimaal (zoals in 0,34).
Hier is een demo waarmee je een beetje met individuele filters kunt spelen:
grijswaarden ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Converteert de invoerafbeelding naar grijswaarden. De waarde van "amount" bepaalt het aandeel van de conversie. Een waarde van 100% is volledig grijstinten. Een waarde van 0% laat de invoer ongewijzigd. Waarden tussen 0% en 100% zijn lineaire vermenigvuldigers op het effect. Als de parameter "amount" ontbreekt, wordt een waarde van 100% gebruikt. Negatieve waarden zijn niet toegestaan.
sepia()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Converteert het invoerbeeld naar sepia. De waarde van "amount" bepaalt het aandeel van de conversie. Een waarde van 100% is volledig sepia. Een waarde van 0 laat de invoer ongewijzigd. Waarden tussen 0% en 100% zijn lineaire vermenigvuldigers op het effect. Als de parameter "amount" ontbreekt, wordt een waarde van 100% gebruikt. Negatieve waarden zijn niet toegestaan.
verzadigen()
filter: saturate(2); /* same as… */ filter: sature(200%);Verzadigt het invoerbeeld. De waarde van "amount" bepaalt het aandeel van de conversie. Een waarde van 0% is volledig onverzadigd. Een waarde van 100% laat de invoer ongewijzigd. Andere waarden zijn lineaire vermenigvuldigers op het effect. Waarden van meer dan 100% zijn toegestaan, wat zorgt voor superverzadigde resultaten. Als de parameter "amount" ontbreekt, wordt een waarde van 100% gebruikt. Negatieve waarden zijn niet toegestaan.
tint-roteren ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Past een tintrotatie toe op het invoerbeeld. De waarde van "angle" definieert het aantal graden rond de kleurencirkel dat de invoersamples zullen worden aangepast. Een waarde van 0 ° laat de invoer ongewijzigd. Als de parameter "angle" ontbreekt, wordt de waarde van 0deggebruikt. De maximale waarde is 360deg.
omkeren()
filter: invert(100%);Keert de samples in het invoerbeeld om. De waarde van "amount" bepaalt het aandeel van de conversie. Een waarde van 100% wordt volledig omgekeerd. Een waarde van 0% laat de invoer ongewijzigd. Waarden tussen 0% en 100% zijn lineaire vermenigvuldigers op het effect. Als de parameter "amount" ontbreekt, wordt een waarde van 100% gebruikt. Negatieve waarden zijn niet toegestaan.
ondoorzichtigheid ()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Past transparantie toe op de monsters in het invoerbeeld. De waarde van "amount" bepaalt het aandeel van de conversie. Een waarde van 0% is volledig transparant. Een waarde van 100% laat de invoer ongewijzigd. Waarden tussen 0% en 100% zijn lineaire vermenigvuldigers op het effect. Dit komt overeen met het vermenigvuldigen van de ingevoerde afbeeldingsmonsters met het aantal. Als de parameter "amount" ontbreekt, wordt een waarde van 100% gebruikt. Deze functie is vergelijkbaar met de meer gevestigde ondoorzichtigheidseigenschap; het verschil is dat met filters sommige browsers hardwareversnelling bieden voor betere prestaties. Negatieve waarden zijn niet toegestaan.
helderheid()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Past een lineaire vermenigvuldiger toe op het invoerbeeld, waardoor het min of meer helder lijkt. Een waarde van 0% zorgt voor een afbeelding die volledig zwart is. Een waarde van 100% laat de invoer ongewijzigd. Andere waarden zijn lineaire vermenigvuldigers op het effect. Waarden van meer dan 100% zijn toegestaan, wat betere resultaten oplevert. Als de parameter "amount" ontbreekt, wordt een waarde van 100% gebruikt.
contrast()
filter: contrast(4); /* same as… */ filter: contrast(400%);Past het contrast van de invoer aan. Een waarde van 0% zorgt voor een afbeelding die volledig zwart is. Een waarde van 100% laat de invoer ongewijzigd. Waarden boven de 100% zijn toegestaan, waardoor resultaten met minder contrast worden verkregen. Als de parameter "amount" ontbreekt, wordt een waarde van 100% gebruikt.
vervagen ()
filter: blur(5px); filter: blur(1rem);Past een Gaussiaanse vervaging toe op het invoerbeeld. De waarde van 'radius' definieert de waarde van de standaarddeviatie van de Gaussiaanse functie, of hoeveel pixels op het scherm in elkaar overvloeien, dus een grotere waarde zal meer vervaging veroorzaken. Als er geen parameter is opgegeven, wordt een waarde 0 gebruikt. De parameter is opgegeven als een CSS-lengte, maar accepteert geen procentuele waarden.
slagschaduw ()
filter: drop-shadow((2,3) ?)Past een slagschaduweffect toe op de invoerafbeelding. Een slagschaduw is in feite een wazige, verschoven versie van het alfamasker van de invoerafbeelding, getekend in een bepaalde kleur, samengesteld onder de afbeelding. De functie accepteert een parameter van het type (gedefinieerd in CSS3 Achtergronden), met de uitzondering dat het trefwoord 'inset' niet is toegestaan.
Deze functie is vergelijkbaar met de meer gevestigde box-shadow-eigenschap; het verschil is dat met filters sommige browsers hardwareversnelling bieden voor betere prestaties.
Slagschaduw bootst ook de contouren van de beoogde objecten op natuurlijke wijze na, in tegenstelling tot box-shadowdat alleen de doos als zijn pad wordt behandeld.
Net als bij text-shadow is er geen 'spread'-parameter om een vaste schaduw te creëren die groter is dan het object.
url ()
filter: url()De url()functie neemt de locatie aan van een XML-bestand dat een SVG-filter specificeert, en kan een anker voor een specifiek filterelement bevatten. Hier is een tutorial die werkt als een leuke introductie tot SVG-filters met een leuke demo.
Animatiefilters
Omdat filters animeerbaar zijn, kan het de deuren openen voor heel veel plezier.
Opmerkingen
U kunt een onbeperkt aantal functies combineren om de weergave te manipuleren, maar de volgorde is nog steeds belangrijk (dwz het gebruik van grayscale()after sepia()zal resulteren in een volledig grijze uitvoer).
Een berekende waarde anders dan "geen" resulteert in het creëren van een stapelcontext op dezelfde manier als CSS-ondoorzichtigheid. De filtereigenschap heeft geen effect op de geometrie van het doosmodel van het doelelement, ook al kunnen filters ervoor zorgen dat er buiten het kader van een element wordt geschilderd. Alle delen van het doelelement worden beïnvloed door filterfuncties. Dit omvat alle inhoud, achtergrond, randen, tekstversiering, contouren en zichtbaar schuifmechanisme van het element waarop het filter is toegepast, en die van zijn nakomelingen. Filters kunnen ook worden toegepast op inline-inhoud, zoals individuele tekstbereiken.
De specificatie introduceert ook een filter(image-URL, filter-functions)wrapper-functie voor een afbeelding. Hiermee kunt u elke afbeelding filteren op het moment dat u deze binnen CSS gebruikt. U kunt bijvoorbeeld een achtergrondafbeelding vervagen zonder de tekst te vervagen. Deze filterfunctie wordt nog niet ondersteund in browsers. In de tussentijd kunt u zowel de achtergrond als het filter toepassen op een pseudo-element om een soortgelijk effect te creëren.
Het eigen filtermateriaal van IE
Ook gebruikt het filterpand, zoals:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Meestal gebruikt voor ondoorzichtigheid wanneer u IE 8 en lager moest ondersteunen.
Meer informatie
- Specificatie van W3C-filtereffecten
- http://html5-demos.appspot.com/static/css/filters/index.html
- Bennett Feely's Filtersgalerij
- MDN Docs
- Kan ik gebruiken
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Inzicht in CSS-filtereffecten
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 18 * | 35 | Nee | 79 | 6 * |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0-6,1 * |