CSS-filtereffecten. CSS3-filters: afbeeldingen wijzigen met behulp van stijlen

Om bijvoorbeeld de helderheid/contrast van een afbeelding voor een website te wijzigen, werden voorheen filters uit verschillende grafische editors gebruikt. Deze tijden zijn al verleden tijd; deze effecten kunnen nu worden geïmplementeerd met behulp van de eigenschappen en parameters van CSS3-technologie.

Filter is een CSS3 Cascading Style Sheets-eigenschap die wordt gebruikt om het kleurenschema van afbeeldingen te wijzigen. Meestal gebruikt met het voorvoegsel -webkit-.

Helaas wordt deze CSS3-eigenschap niet ondersteund door oudere browsers. U kunt de lijst met ondersteunde browsers bekijken.

1. Grijswaarden - grijze tint (zwart-witfilter)

Om een "zwart-witfilter"-effect te creëren, gebruikt u de grijswaardenparameter, waarop een waarde van 0 - 100% wordt toegepast.

2. Sepia - lichtbruine tint (sepiafilter)

Om een "lichtbruin filter"-effect te creëren, gebruikt u de sepia-parameter, waarop een waarde van 0 - 100% wordt toegepast.

Om een "helderheidsfilter" -effect te creëren, gebruikt u de helderheidsparameter, waarop een waarde van 0 tot grote waarden wordt toegepast (in procenten).

Bij 0% is de afbeelding bijvoorbeeld zwart, bij 100% wordt de oorspronkelijke helderheid van de afbeelding gebruikt, bij 200% wordt de helderheid verdubbeld.

4. Contrast - contrastfilter

Het contrastfilter past het verschil aan tussen de donkere en lichte tinten van een afbeelding. De contrastparameter wordt gebruikt en er wordt een waarde van 0 tot een hoog percentage toegepast.

Bij 0% is het beeld zwart, bij 100% wordt het originele beeldcontrast gebruikt, bij 150% neemt het contrast 1,5 keer toe.

Het verzadigingsfilter geeft een afbeelding een rijker, meer verzadigd uiterlijk. Er wordt gebruik gemaakt van de verzadigingsparameter, er wordt een waarde van 0 tot grote waarden toegepast (in procent).

Bij 0% wordt het beeld zwart-wit (analoog aan het grijswaardenfilter), bij 100% wordt de oorspronkelijke verzadiging van het beeld gebruikt, bij 200% wordt de verzadiging verdubbeld.

Kleurinversie - het kleurengamma van een afbeelding veranderen naar het tegenovergestelde in het spectrum.

De inverterparameter is verantwoordelijk voor de werking van het filter; er wordt een waarde van 0 tot 100% toegepast.

Dit filter verandert de kleurhoek op basis van het "kleurenwiel" en verschuift deze met een opgegeven waarde in graden.

De parameter tint-rotate is verantwoordelijk voor de werking van het filter; er wordt een waarde van 0 tot 360 graden (graden) toegepast.

Creëert een beeldvervagingseffect. De essentie van het filter is om het aantal pixels in de straal te bepalen dat met elkaar zal samenvloeien (hoe groter de parameter, hoe groter de vervaging)

De vervagingsparameter is verantwoordelijk voor de werking van het filter; de waarde wordt opgegeven in pixels (px).

Het filter past het transparantieniveau van de afbeelding aan.

De dekkingsparameter is verantwoordelijk voor het werk; de waarde is ingesteld van 0 - 100%. Bij een waarde van 10% is de afbeelding nauwelijks zichtbaar, bij 100% is er geen transparantie.

Hoe maak je een animatie tijdens het zweven (zoals in de demovoorbeelden)?

HTML-opmaak

/* Pas de vervagingsklasse toe op de afbeelding */

CSS-opmaak

Gebaseerd op het demovoorbeeld is het beeld in een statische toestand al wazig, maar als je er overheen zweeft, wordt het duidelijk, d.w.z. onscherpte is uitgeschakeld. Op basis hiervan krijgen we de volgende stijlen:

Img (overgang: 0,5s alles; //vloeiende overgang, 0,5 seconden) img.blur ( -webkit-filter:blur(1px); //blur actief, offset 1px ) img.blur:hover ( -webkit-filter:blur (0px); //vervaging is gedeactiveerd, er is geen pixelverschuiving)

Hallo vrienden, vandaag heb ik een hele GROTE les voor jullie, een hele 27 minuten. Maar daarin zullen we kijken naar een heel, heel, heel interessante eigenschap waarmee je verschillende speciale effecten voor afbeeldingen kunt instellen zonder in te gaan op Photoshop-programma en andere redacteuren.

Filter is een eigenschap in CSS3 die uw afbeeldingen kan wijzigen. Pas vervaging toe, verhoog het contrast en de helderheid, voeg schaduwen toe, verander kleuren en nog veel, veel meer.

In totaal heeft Filter 10 waarden waarmee je “allerlei interessante dingen” kunt doen met site-elementen. Ik stel nu voor om al deze 10 betekenissen in de praktijk te analyseren in de onderstaande video-tutorial.

Videofilter CSS 3 – Afbeeldingsfilters:

Een voorbeeld van de pagina die we in deze tutorial maken:

U kunt het sjabloonbestand downloaden met .

Aandacht! De eigenschap filters wordt momenteel getest en wordt alleen volledig ondersteund door de Firefox-browser. A Chrome-browser en andere gebaseerd op de Webkit-engine, werkt deze eigenschap alleen bij het toevoegen van voorvoegsels. Ik toon voorvoegsels aan het einde van de les, dus ik raad aan om deze eerst door te nemen. Firefox nieuwste versies.

Als je te lui bent om de video te bekijken, kun je deze bekijken gedetailleerde instructies hieronder met alle filterregels.

10 filtereffecten in CSS3

Houd er rekening mee dat alle effecten in de onderstaande afbeeldingen alleen worden geïmplementeerd met behulp van CSS3, dus ze zullen niet zichtbaar zijn in oudere browsers!!!

1. Vervagingsfilter

Als we praten in eenvoudige taal, dan is dit de gebruikelijke vervaging van de foto. Een filter is geweldig als je de randen wilt verzachten. Door vervaging ontstaat de indruk dat de achtergrond onscherp is.

Laten we proberen ons filter op de vos toe te passen door de volgende code te schrijven:

Aan de linkerkant heb ik voor de duidelijkheid een gewone afbeelding geplaatst, maar aan de rechterkant is dezelfde afbeelding, alleen aangepast met CSS3.

Een filter met een vervagingswaarde wordt opgegeven in pixels. Bovendien geldt dat hoe hoger deze waarde is, des te waziger het beeld lijkt.

Helderheid filteren

Dit filter is vergelijkbaar met het wijzigen van de helderheid van een tv-scherm. IN in dit geval Past de kleur aan tussen zwart en de originele kleur terwijl u parameters toevoegt.

En hier is ons proefpaard:

U kunt aanpassen vanaf 0% of meer. Bij 0% is de afbeelding zwart, bij 100% is deze origineel en bij 200% wordt deze twee keer zo helder. Dit is erg goed effect, vooral voor donkere beelden.

Het helderheidsfilter kan op 3 manieren worden gespecificeerd:

gehele getallen
fractionele getallen
interesse

Bovendien zijn er in principe geen beperkingen. In het voorbeeld hebben we de waarde ingesteld op 2 en hebben we de helderheid van onze afbeelding met 2 keer of 200% verhoogd.

3. Contrastfilter

Met dit filter kunt u het contrast van een foto vergroten door het verschil tussen de lichte en donkere tinten van de afbeelding aan te passen. Ook hier worden waarden op drie manieren gespecificeerd: hele getallen, breuken en percentages. 100% is dus de standaardwaarde. 0% - zwart beeld. En alles meer dan 100% voegt contrast toe aan jou.

Deze keer zullen we de kat bespotten. Laten we er +50% contrast aan toevoegen:

Hier is het resultaat:

Zoals je kunt zien, hoeven we nu niet eens Photoshop te gebruiken om contrast en onscherpte te creëren. Hier, midden in CSS, nemen en veranderen we de afbeeldingen zoals ons hartje begeert.

4. Filterverzadiging - verzadigen

Dit is erg cool effect, waardoor uw afbeeldingen levendiger en verzadigder worden. We geven de waarden aan in drie opties: hele en gebroken getallen, evenals percentages. Laten we de waarde specificeren: 200%. Laten we de verzadiging van onze foto met 2 keer vergroten.

De zee is merkbaar aangenamer geworden:

Kijk hoe sappig het beeld is geworden. Ik vind het een heel gaaf effect! Zullen we gaan??

5. Filtertransparantie - dekking

Stelt transparantie in. Er worden bepaalde beperkingen opgelegd aan de waarden van dit filter:

percentages: van 0% tot 100

Laten we proberen de transparantie van de volgende afbeelding met 50% te verminderen.

Kijk wat er gebeurde:

6. Filterinversie - omkeren

Hiermee kunt u kleuren "omdraaien". Er zijn ook beperkingen op de waarden van dit filter:

hele en gebroken getallen: van 0 tot 1
percentages: van 0% tot 100

In ons geval zullen we instellen maximale waarde - 100 %:

En met een lichte beweging van de hand verandert een prachtige sportwagen in...

Dit filter heeft ons geholpen een negatief effect op de afbeelding zelf te creëren.

7. Sepia-filter

Hiermee kunt u de kleur wijzigen door een sepiatint toe te voegen. Dat wil zeggen, u krijgt een imitatie oude foto. De beperkingen op filterwaarden zijn hetzelfde als in de vorige twee.

hele en gebroken getallen: van 0 tot 1
percentages: van 0% tot 100

Goed? Zullen we het proberen?

Fuck-tibidoh! Met een lichte handbeweging zullen we deze foto een paar decennia verouderen. Het lijkt alsof ik gek word met deze voorbeelden.

In ons geval hebben we een fractionele waarde gespecificeerd - 0,5. Maar je kunt experimenteren zoals je wilt!

8. Grijswaardenfilter

Met dit filter kunnen we kleuren omzetten in grijstinten. Er zijn ook beperkingen op filterwaarden:

hele en gebroken getallen: van 0 tot 1
percentages: van 0% tot 100

Bij 100% zal de gehele afbeelding dus in grijstinten zijn, en bij 0% blijft deze ongewijzigd. 0 is gelijk aan 0% en 1,0 is gelijk aan 100%.

Laten we de waarde instellen op 0,7 (of 70%):

Dit artikel gaat over API's die nog niet volledig gestandaardiseerd zijn en nog steeds in ontwikkeling zijn. Wees voorzichtig bij het gebruik van experimentele API's in uw eigen projecten.

Invoering

Filters zijn krachtig hulpmiddel, die webontwikkelaars kunnen gebruiken om interessante visuele effecten te creëren. In dit artikel bekijken we de geschiedenis van filtereffecten, wat ze doen en hoe je ze kunt gebruiken. We zullen voorbeelden bekijken van alle vooraf gedefinieerde filters die voor CSS zijn gedefinieerd.

We bespreken ook een aantal prestatieaspecten voor gebruik op desktop- en mobiele apparaten, zoals nauwkeurige definitie De snelheid van filterinteractie is belangrijk om een positieve gebruikerservaring te creëren. Ten slotte zullen we kijken naar de huidige stand van zaken met betrekking tot de implementatie van filtereffecten in moderne browsers.

Het verleden, heden en de toekomst van filtereffecten

Filtereffecten zijn ontstaan als onderdeel van de Scalable Vector Graphics (SVG)-specificatie. Ze zijn gemaakt om een reeks verschillende pixels in vectorafbeeldingen toe te passen op basis van de effecten van de afbeelding. Naarmate browserontwikkelaars in de loop van de tijd SVG-mogelijkheden toevoegden, werd het nut van filters duidelijk.

U Robert O'Callaghan Mozilla had een briljant idee om SVG-filters te gebruiken CSS toepassen naar "gewone" HTML-inhoud.

Robert ontwikkelde een prototype dat liet zien hoe krachtig een combinatie van filters en CSS-stijlen kon zijn. De CSS- en SVG-werkgroepen van het W3C besloten het gebruik van filters voor zowel HTML als SVG te stroomlijnen via CSS-stijlen, en zo werd de CSS-eigenschap “filter” geboren.

IN op dit moment Een samenwerkend team van CSS- en SVG-ontwikkelaars werkt eraan om filters universeel te maken. De actuele specificatie over dit onderwerp vindt u hier.

Nieuw leven voor de CSS-eigenschap "filter".

Webontwikkelaars ervaren soms een déjà vu als ze "filter" in CSS-stijlen zien. Dit komt door het feit dat oudere versies Internet Explorer had een "filter" -eigenschap geïmplementeerd via CSS om enige platformfunctionaliteit te bieden. Dit was de oude definitie van de eigenschapsstandaard "filter", die nu deel uitmaakt van CSS3.

Dus als u 'filter' ziet in de omgeving van sommige oude webpagina's, verwar dit dan niet met nieuwe filters. De nieuwe eigenschap "filter" is het object waar alle conversies plaatsvinden, en nieuwere versies van IE implementeren dit op dezelfde manier als alle andere moderne browsers.

Hoe filters werken

Wat doet een filter precies? Je kunt een filter zien als een laatste stap die iets magisch doet nadat de inhoud is opgemaakt en op de pagina is weergegeven.

Wanneer de browser webpagina's laadt, moet hij stijlen toepassen, de lay-out implementeren en vervolgens de pagina weergeven die we dan zien. Filters worden na al deze stappen van kracht, net voordat de pagina naar het scherm wordt gekopieerd.

Wat ze doen kan worden omschreven als het maken van een foto van de weergegeven pagina bitmap en voer vervolgens wat grafische magie uit op de pixels van die foto en geef het resultaat weer bovenop de originele afbeelding van de pagina.

Een ander beeld dat je je kunt voorstellen is een filter dat op een cameralens is geplaatst. Je kijkt door de cameralens buitenwereld, aangepast door het filtereffect.

Dit betekent uiteraard dat er bij het maken van een pagina met behulp van filters een bepaalde hoeveelheid tijd wordt besteed. extra tijd, maar als ze correct worden toegepast, heeft dit een minimale impact op de laadsnelheid van de site.

Bovendien kunt u, net zoals u meerdere filters tegelijk op een cameralens kunt toepassen, een willekeurig aantal filters achter elkaar op webpagina's toepassen om allerlei effecten te bereiken.

Filters gedefinieerd met SVG en CSS

Omdat filters oorspronkelijk uit SVG kwamen, zijn er verschillende manieren hun definitie en gebruik. De SVG zelf heeft een element dat de definitie van verschillende filtereffecten omhult met behulp van XML-syntaxis.

Een set filters gedefinieerd via CSS heeft het voordeel dat hetzelfde geldt grafisch model ze zijn veel gemakkelijker te definiëren en gemakkelijk te gebruiken in een stijlblad.

De meeste CSS-filters kunnen worden uitgedrukt in termen van SVG-filters en met CSS kunt u ook verwijzen naar een filter dat is gedefinieerd in de SVG.

Ontwikkelaars van CSS-filters hebben veel moeite gestoken in het gebruiksvriendelijker maken van filters voor webontwerpers, en daarom behandelt dit artikel alleen filters die rechtstreeks via CSS beschikbaar zijn. Filters die via SVG zijn gedefinieerd, worden genegeerd.

Hoe u een CSS-filter toepast

Let op: de onderstaande beschrijvingen en voorbeelden gebruiken de officiële syntaxis W3C, die vroeg of laat in alle moderne browsers beschikbaar zal zijn. Om op dit moment filters te gebruiken, moet u de " filter» met een leveranciersvoorvoegsel. Maar maak je geen zorgen, er is een gemakkelijke manier om hiermee om te gaan, die we aan het einde van dit artikel zullen bespreken.

Het gebruik van CSS-filters gebeurt met behulp van de eigenschap "filter", die wordt toegepast op elk zichtbaar element op de pagina. Als een zeer eenvoudig voorbeeld we kunnen zoiets als dit schrijven:

div (+filter: grijstinten(100%); )

en dan bevindt alle inhoud zich in alle elementen

de pagina wordt in grijstinten gekleurd. Ideaal voor het maken van een pagina in de stijl van een tv-beeld uit de jaren 40:

Origineel beeld

Afbeelding na het toepassen van het filter

De meeste filters gebruiken een of andere vorm van parameter om aan te passen hoe intens het filter wordt toegepast.

Als u bijvoorbeeld wilt dat de inhoud iets tussen de originele kleur en een afbeelding is die volledig met grijstinten is gefilterd, kunt u dit als volgt doen:

div (+filter: grijswaarden(50%); )

50% gefilterde afbeelding

Als u meerdere verschillende filters achter elkaar wilt toepassen, is dat heel eenvoudig: plaats ze in de juiste volgorde CSS-bestand zoals dit:

In dit voorbeeld wordt eerst een grijsfilter toegepast en daarna een sepia-effect. Het uiteindelijke beeld ziet er als volgt uit:

Dankzij de mogelijkheid om filters achter elkaar toe te passen, kun je heel verschillende effecten bereiken - het hangt allemaal af van je verbeeldingskracht. Met wat experimenteren kun je werkelijk verbazingwekkende resultaten behalen.

Welke filtereffecten zijn beschikbaar via CSS

Het originele SVG-filtermechanisme is dus behoorlijk krachtig, maar tegelijkertijd behoorlijk moeilijk te gebruiken. Hierdoor is er een groot aantal standaardfiltereffecten in CSS geïntroduceerd, waardoor ze zeer gemakkelijk te gebruiken zijn.

Laten we ze allemaal bekijken en uitzoeken wat ze doen.

grijstinten(bedrag)

Dit filter converteert de kleuren van de invoerafbeelding naar grijswaarden. “bedrag” geeft aan hoeveel procent dit filter wordt toegepast. Als “bedrag” 100% is, worden alle kleuren weergegeven in grijstinten; dit is 0%, de kleuren blijven ongewijzigd.

U kunt een getal met drijvende komma gebruiken om de waarde te definiëren als u liever geen percentages gebruikt. Dat wil zeggen, 0 betekent hetzelfde als 0%, 1,0 betekent 100%:

Origineel

sepia(bedrag)

Dit filter produceert sepiakleurige kleuren zoals oude foto's. "hoeveelheid" wordt op dezelfde manier gebruikt als voor het grijswaardenfilter.

Namelijk: 100% zorgt ervoor dat alle kleuren volledig weergegeven worden in sepiatinten, lagere waarden zorgen ervoor dat je het effect minder intens kunt toepassen:

Origineel

verzadigen(hoeveelheid)

Dit effect bepaalt de verzadiging van kleuren, waardoor ze levendiger worden. Dit is een cool effect waarmee u uw foto's op posters of spandoeken kunt laten lijken.

Met dit effect kun je ook waarden hoger dan 100% gebruiken om de verzadiging echt naar voren te brengen. Dit is absoluut een effect waardoor afbeeldingen er werkelijk schitterend uit kunnen zien!

Origineel

Opmerking: B Chrome-versies 19, volgens de W3C-specificatie accepteert de functie saturate() in plaats daarvan een geheel getal (zonder procentteken) decimale getallen of procent. Maak je geen zorgen, de ontwikkelaars zijn op de hoogte van deze bug en deze zal binnenkort worden opgelost.

tint-roteren (hoek)

Dit filter creëert een enigszins funky kleureffect dat kan worden gebruikt om te creëren interessante resultaten. Hij verschuift kleurenschema, waardoor het beeld er compleet anders uitziet. Stel je een kleurenspectrum voor van rood tot paars, gerangschikt in een cirkel.

Dit effect verschuift alle originele kleuren met een bepaalde hoek, die wordt ingesteld door de parameter “angle”. Dit is natuurlijk een vereenvoudigde weergave van wat dit filter doet, maar hopelijk begrijp je het idee ongeveer:

Origineel

tint-roteren (90 graden)

omkeren(bedrag)

Dit effect keert de kleuren om - dus als de parameter "hoeveelheid" is ingesteld op 100%, ziet het resultaat eruit als een oud cameranegatief van film! Net als bij de vorige filters, met waarden van minder dan 100%, kunnen we de intensiteit van het filter aanpassen:

Origineel

dekking (hoeveelheid)

Als u wilt dat uw inhoud doorzichtig lijkt, is dit filter precies wat u nodig heeft. De waarde "bedrag" bepaalt hoe transparant de pagina-inhoud zal zijn. Met een waarde van 100% wordt dus de volledige dekking ingesteld, wat betekent dat de invoerafbeelding vergelijkbaar zal zijn met de uitvoerafbeelding.

Naarmate de parameterwaarde afneemt, worden de afbeeldingen transparanter en steeds minder opvallend. Dit betekent uiteraard dat als ze eerder iets op de pagina bedekten, die objecten zichtbaar worden.

"bedrag" 0% betekent dat de afbeelding volledig zal verdwijnen - maar houd er rekening mee dat u ze nog steeds kunt instellen om gebeurtenissen zoals muisklikken, enz. bij te houden. Dit is zelfs mogelijk voor volledig transparante objecten. Handig als je interactieve ruimtes wilt creëren waarin helemaal niets te zien is.

Dit filter werkt op dezelfde manier als de eigenschap "dekking" die u al kent. Over het algemeen wordt de CSS-eigenschap "opacity" niet gebruikt hardwareversnelling, maar sommige browsers die filters implementeren met behulp van hardwareversnelling versnellen een versie van het dekkingsfilter voor betere prestaties:

Origineel

helderheid (hoeveelheid)

Dit effect werkt als het aanpassen van de helderheid op een tv. Het verandert de kleuren van volledig zwart naar de originele kleur in verhouding tot de gegeven parameter "hoeveelheid".

Als u deze op 0% instelt, ziet u alleen maar zwart, maar naarmate u de waarde naar 100% verhoogt, ziet u de originele afbeelding tot 100% zie je het originele element zelf.

Natuurlijk kunt u doorgaan - als u dit op ongeveer 200% instelt, krijgt u een beeld dat twee keer zo helder is als het origineel - geweldige manier voor het verwerken van foto's gemaakt bij weinig licht!

Origineel

helderheid(140%)

contrast(bedrag)

Nog een bedieningsfunctie van de tv! Dit filter corrigeert het verschil tussen de donkerste en lichtste delen van het invoerbeeld. Als je 0% gebruikt, krijg je een zwarte achtergrond, net als bij "helderheid" is dat niet zo interessant.

Naarmate u de waarde echter verhoogt naar 100%, zal de originele afbeelding in het donker verschijnen totdat u deze op 100% krijgt. Voor dit effect kun je ook verder gaan dan 100%, waardoor het verschil tussen lichte en donkere kleuren nog groter wordt:

Origineel

vervagen(straal)

Als u de randen van uw inhoud wilt verzachten, kunt u vervaging toevoegen. Het ziet eruit als een klassiek beeld door matglas, wat vroeger een populaire manier was om films op te nemen.

Dit effect zorgt ervoor dat alle kleuren uit de gebieden lopen die ze in de originele afbeelding vulden en overvloeien in aangrenzende kleuren - alsof uw oog de focus heeft verloren.

De parameter "radius" bepaalt hoeveel pixels op het scherm worden samengevoegd. Hoe hoger de waarde, hoe sterker de onscherpte. Nul laat het beeld uiteraard ongewijzigd:

Origineel

slagschaduw (schaduw)

Het is leuk om een effect te hebben waarmee je je inhoud eruit kunt laten zien alsof deze voor de zon staat, die een schaduw werpt op de grond erachter. En dit wordt uiteraard bereikt met behulp van het slagschaduwfilter.

Het maakt een momentopname van een afbeelding, converteert deze naar één kleur, vervaagt deze en compenseert vervolgens het resultaat enigszins, zodat het lijkt op een schaduw van de originele inhoud. De parameter "schaduw" is eigenlijk iets complexer dan slechts een enkele waarde. Het is een reeks waarden gescheiden door een spatie - en sommige waarden zijn optioneel!

“schaduw” stelt parameters in zoals de locatie van de schaduw, de mate van onscherpte, de kleur van de schaduw, enz. Om te ontvangen volledige informatie Voor informatie over wat wordt gespecificeerd door de waarden van de parameter "shadow", zie de CSS3 Backgrounds-specificatie "box-shadow".

Een paar voorbeelden hieronder moeten u een idee geven van de effectopties die beschikbaar zijn met dit filter:

slagschaduw (16px 16px 20px zwart)

slagschaduw (10px -16px 30px paars)

Dit is een andere filterbewerking die vergelijkbaar is met de bestaande CSS-functionaliteit die beschikbaar is via de eigenschap 'box-shadow'. Het gebruik van dit filter betekent dat u in sommige browsers de prestaties kunt optimaliseren met behulp van hardwareversnelling, zoals beschreven in de sectie "dekking".

SVG-gerelateerde URL-filters

Omdat filters oorspronkelijk zijn gemaakt als onderdeel van SVG, is het logisch dat u inhoud kunt opmaken met behulp van SVG-filters. Met de mogelijkheden die de eigenschap “filter” tegenwoordig biedt, is dit heel eenvoudig te doen.

Alle SVG-filters zijn gedefinieerd met een 'ID'-attribuut, dat kan worden gebruikt om naar een specifiek filtereffect te verwijzen. Het enige dat u dus hoeft te doen om een SVG-filter vanuit CSS te gebruiken, is ernaar te linken met behulp van de 'url'-syntaxis.

De SVG-opmaak voor een filter kan er bijvoorbeeld ongeveer zo uitzien:

...

En in CSS kun je deze eenvoudige code plaatsen:

div (+filter: url(#foo); )

En voila! Alle blokken

in het document wordt ontworpen met behulp van een SVG-filter.

op maat (binnenkort beschikbaar)

Binnenkort kunnen we aangepaste filters gebruiken. Hierdoor kunt u het volledige potentieel van uw GPU volledig benutten door het gebruik van een speciale shader-programmeertaal en absoluut verbazingwekkende effecten creëren, alleen beperkt door uw verbeeldingskracht.

Dit "filter"-gedeelte van de specificatie staat nog steeds ter discussie, maar zodra het in de meeste gevallen is geïmplementeerd populaire browsers, we zullen het zeker in detail beschrijven.

Prestatieproblemen

Een van de belangrijkste aspecten waar elke webontwikkelaar om geeft, zijn de prestaties van de webpagina of applicatie. CSS-filters zijn een krachtig hulpmiddel voor visuele effecten, maar kunnen tegelijkertijd de prestaties van websites beïnvloeden.

Begrijpen wat ze doen en hoe dit de prestaties beïnvloedt belangrijk. Vooral als u wilt dat uw site goed werkt op mobiele apparaten.

Allereerst zijn niet alle filters gelijk! In feite zijn de meeste filters snel op elk platform en hebben ze zeer weinig invloed op de prestaties.

Maar filters die presteren verschillende soorten onscherpte is doorgaans langzamer dan andere. Dit geldt voor effecten als 'onscherpte' en 'slagschaduw'. Dit betekent uiteraard niet dat u ze niet mag gebruiken, maar alleen dat u moet begrijpen hoe ze werken.

Wanneer u het 'vervagings'-filter toepast, worden kleuren van verschillende pixels in de uitvoerafbeelding gemengd om het vervagingseffect te genereren. Als de parameter 'radius' dus 2 is, moet het filter, om gemengde kleuren te genereren, 2 pixels in elke richting verwerken vanaf elke bronpixel.

Omdat dit per bronpixel gebeurt, betekent dit automatisch een groot aantal berekeningen. En wat grotere straal, hoe meer berekeningen. Omdat 'blur' pixels in elke richting verwerkt, betekent een verdubbeling van de straal dat er vier keer zoveel pixels moeten worden verwerkt.

Dat wil zeggen dat elke verdubbeling van de straal een viervoudige vertraging met zich meebrengt. Het 'slagschaduw'-filter bevat het 'blur'-effect als onderdeel van de objectverwerking. Daarom gedraagt het zich hetzelfde als 'blur' wanneer u de 'radius'- en 'spread'-delen van de' shadow'-parameter wijzigt.

Maar eigenlijk is ‘blur’ helemaal niet zo erg, omdat het op sommige platforms kan worden gebruikt GPU om het te versnellen. Maar dit is niet in alle browsers beschikbaar.

Bij twijfel kun je het beste experimenteren en erachter komen kleinste waarde'radius' waardoor u een acceptabel visueel effect krijgt. Deze opzet zal uw gebruikers gelukkiger maken, vooral als ze uw site openen vanaf een smartphone.

Als u 'url'-filters gebruikt die verwijzen naar SVG-filters, kunnen deze willekeurige filtereffecten bevatten en daarom ook traag zijn.

Probeer er dus achter te komen wat dit filtereffect precies doet en experimenteer ermee mobiele apparaten om er zeker van te zijn dat uw prestaties in orde zijn.

Toegankelijkheid in moderne browsers

Momenteel zijn er een aantal CSS-filtereffecten beschikbaar in WebKit-browsers en Mozilla Firefox. In de nabije toekomst verwachten we hetzelfde in Opera, maar ook in Internet Explorer 10.

Omdat de specificatie nog in ontwikkeling is, hebben sommige browserleveranciers dit spul geïmplementeerd met behulp van voorvoegsels. In WebKit moet je dus '-webkit-filter' gebruiken, in Mozilla Firefox '-moz-filter'. Houd ook in de gaten of er versies voor andere browsers verschijnen zodra deze worden uitgebracht.

Niet alle browsers ondersteunen alle filtereffecten, dus de selectie van filters zal voor elke browser variëren verschillende platforms. Momenteel ondersteunt de Mozilla Firefox-browser alleen de functie 'filter: url()' - zonder een leveranciersvoorvoegsel, omdat de implementatie ervan voorafgaat aan andere effectfuncties.

Hieronder hebben we de belangrijkste samengevat CSS-effecten filters beschikbaar in verschillende browsers, waarbij de prestatiecijfers bij benadering worden gegeven wanneer ze in andere software worden geïmplementeerd.

Houd er rekening mee dat de rij moderne browsers ze beginnen ze in hardware te implementeren (GPU-versnelling is beschikbaar). Wanneer er GPU-ondersteuning voor wordt geboden, zullen de prestaties bij langzamere effecten aanzienlijk worden verbeterd. Zoals gewoonlijk, testen verschillende browsers- Dit beste manier hun werk evalueren.

Vertaling van het artikel " CSS-filtereffecten begrijpen"werd opgesteld door het vriendelijke projectteam.

CSS-eigenschappen maar ze hebben een zodanig ontwikkelingsniveau bereikt dat ze sommige ervan aankunnen belangrijke functies grafische editors. Een voorbeeld hiervan zijn CSS-filters, waarmee je prachtige effecten voor afbeeldingen.

Was het vroeger moeilijk voor te stellen, nu zijn bijna alle softwarefilters in de cascadetabel geïmplementeerd, van vervaging tot artistieke kleurmodellen.

Maar toch hebben CSS-filters één klein nadeel: niet alle webbrowsers ondersteunen dit visuele effecten. Natuurlijk is het slechts een kwestie van tijd. En als het uur ‘x’ aanbreekt, moeten ontwikkelaars voorbereid zijn. Laten we voor nu eens kijken naar wat er tot nu toe al is geïmplementeerd.

Browserondersteuning voor CSS-filters

Kortom, alle populaire browsers, Firefox, Chrome, Opera, hebben een “vriendelijke” relatie met filtereffecten. Hetzelfde kan niet gezegd worden over IE, dat volledig weigert effecten te ondersteunen, zelfs in de nieuwste versies.

Browser	Ontdekkingsreiziger	Chroom	Firefox	Safari	Opera	Android	iOS
Versie	Nee	31+	35+	7+	18+	4.4+	6+
filter	—	(-webkit-)	+	(-webkit-)	(-webkit-)	(-webkit-)	(-webkit-)

Functies en syntaxis van CSS-filters

Alle CSS-eigenschappen hebben bepaalde parameters die de volgorde combineren waarin waarden worden geschreven. De filtereigenschap vormt daarop geen uitzondering; deze kan, net als andere, een combinatie van verschillende regels in één toepassing gebruiken. Voeg bijvoorbeeld een helderheidsfilter toe voor een afbeelding en geef na een spatie een ander op: contrast. We zullen alles in dit artikel behandelen met een paar voorbeelden voor een beter begrip.

Syntaxis

Filter: filternaam (percentage van waarde); filteren: url(img.svg); filteren: vervagen(10px); filteren: helderheid (0,9); filteren: contrast(150%); filter: slagschaduw (5px 5px 10px zwart); filter: grijstinten (80%); filter: tint-roteren (60 graden); filter: omkeren (80%); filteren: dekking (50%); filter: verzadigd (50%); filteren: sepia(40%); /* Meerdere filters toepassen */ filter: contrast(150%) grijstinten (80%);

Lijst met filters

Filter	Beschrijving
vervagen (px)	Filter om de afbeelding te vervagen. De mate van onscherpte wordt aangegeven in pixels. Als er geen getal is opgegeven, is de standaardwaarde 0.
slagschaduw()	Schaduw. Een alternatief voor de box-shadow-eigenschap met vergelijkbare parameters en dezelfde schrijfvolgorde. De uitzondering is de vierde waarde, “stretch”: bijna alle browsers ondersteunen deze niet.
grijsschaal (%)	Filter “Ontkleuren”. Er worden tinten toegepast grijs aan de afbeelding, afhankelijk van het opgegeven percentage. Een negatieve waarde is niet toegestaan en de originaliteit van de afbeelding is 0.
helderheid (%)	Pas de helderheid van het beeld aan. Een waarde van 100% geeft het startpunt van de helderheid aan. De aanpassing vindt zowel negatief (-50%) als positief (150%) plaats.
contrast (%)	Pas het beeldcontrast aan. Net als bij het vorige filter geeft een waarde van 100% de oorsprong aan. Wijzigingen kunnen negatief (-20%) of positief (120%) worden ingesteld.
tint-roteren (graden)	Roterende kleurtoon-overlay. Afhankelijk van de opgegeven graad (van 0 graden tot 360 graden) wordt het beeld aangepast op kleur, wat wordt bepaald door het kleurenwiel.
omkeren (%)	Beeldinversie. Er wordt een waarde van 0 tot 100% toegepast zonder negatieve parameter.
verzadigd (%)	Beeldverzadiging. De uitgangspositie wordt bepaald op 100% en heeft geen negatieve waarde.
sepia (%)	Sepia-effect. De originaliteit van de afbeelding wordt bepaald op 0% en is tot 100% beschikbaar zonder ontkenning.
dekking (%)	Transparantie van het beeld. Een ander filter met een vergelijkbare dekkingseigenschap en dezelfde gebruiksmethoden. De instelling is toegestaan van 0 tot 100% zonder negatieve parameter.
url()	Een CSS-link naar een SVG-element met een specifieke #id.
voorletter	Stelt de standaardwaarde van de eigenschap in.
erven	Erft alle eigenschapswaarden van het bovenliggende element.

Voorbeelden van CSS-filters

We zijn bij een interessant deel van het artikel gekomen, waarin we elk filter afzonderlijk zullen beschouwen met voorbeelden van de toepassing ervan. Voor de duidelijkheid worden er drie afbeeldingen gebruikt. De eerste toont het uitgangspunt, de schijn van originaliteit. De tweede zal dienen als een statisch voorbeeld van het toepassen van een filter, en de derde zal het hover-effect tonen, waarbij de muiscursor over de afbeelding beweegt.

Vervagingsfilter

IN grafische editors vervagingsfilter is een onmisbaar hulpmiddel en vaak gebruikt op het werk. Het is niet alleen in staat een wazig beeld te creëren, maar ook een focuseffect te creëren bepaald element de rest van het beeld is wazig. En nog veel meer.

Bij website-ontwerp (bijvoorbeeld vervaging) kan het worden gebruikt als voering voor een betere leesbaarheid van de tekst op de afbeelding. Eigenlijk is de vervaging Gaussiaans vanaf een waarde van 0 px totdat deze volledig verdwijnt.

Origineel

Filter

Zweefeffect

/*statische regel*/ .efbl1 img( filter: vervagen(2px); -webkit-filter: vervagen(2px); ) /*voor zweefeffect*/ .efbl2 img( overgang: alle 0,6s gemak 0s; ) :hover img( filter: vervagen(4px); -webkit-filter: vervagen(4px); overgang: alle 0,6s gemak 0s; )

Schaduw filteren

De schaduweigenschap kwam bij ons met de derde versie trapsgewijze tafel. Het is natuurlijk bekend bij iedereen die betrokken is bij de ontwikkeling van websites, aangezien box-shadow een belangrijke rol speelt bij het ontwerp. Het slagschaduwfilter kan een inferieur alternatief worden genoemd met vergelijkbare parameters, en er zijn er slechts 5, de binnenschaduw niet meegerekend.

De schrijfvolgorde is als volgt: 5px/-5px (horizontale offset), 5px/-5px (verticale offset), 15px (straal van schaduwvervaging), 5px/-5px (uitrekken van schaduw), zwart (kleur). Het filter ondersteunt alle syntaxis behalve stretching en inzetwaarde ( innerlijke schaduw), evenals het toevoegen van meerdere schaduwen, gescheiden door komma's. Maar ondanks dit alles zijn er enkele voordelen: het filter houdt bijvoorbeeld rekening met pseudo-elementen, waardoor u exacte vorm schaduwelement.

Ook interessant is dat wanneer het blok geen achtergrond heeft, maar alleen een randstreek is opgegeven, er bij gebruik van box-shadow een schaduw wordt weergegeven, vermoedelijk rekening houdend met de achtergrond, dat wil zeggen een effen achtergrond. En in het geval van slagschaduw neemt de schaduw de vorm aan van een streek zonder rekening te houden met de achtergrond.

Origineel

Filter

Zweefeffect

/*statische regel*/ .efdrswd1 img( filter: slagschaduw(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: slagschaduw(6px 7px 3px rgba(0, 0, 0 , 0.4)); ) /*voor het zweefeffect*/ .efdrswd2 img( overgang: alle 0,6s gemak 0s; ) .efdrswd2:hover img( filter: slagschaduw(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: slagschaduw (6px 7px 3px rgba(0, 0, 0, 0.4));

Ontkleuringsfilter

Klassieke fotografiestijl voor alle tijden in de goede richting. Het filter staat slechts één waarde toe: positief. Afhankelijk van het opgegeven percentage zullen grijstinten de kleur van de afbeelding soepel vervangen. In plaats van percentages kunt u ook breuken tot een geheel getal (0,01/1) gebruiken.

Origineel

Filter

Zweefeffect

/*statische regel*/ .efgrays1 img( filter: grijstinten(90%); -webkit-filter: grijswaarden(90%); ) /*voor zweefeffect*/ .efgrays2 img( overgang: alle 0,6s gemak 0s; ) .efgrays2:hover img( filter: grijswaarden(90%); -webkit-filter: grijswaarden(90%); overgang: alle 0,6s gemak 0s; )

Helderheidsfilter

Licht toevoegen aan de "onontdekte" zwarte hoeken van de afbeelding. Het wordt vaak gebruikt bij fotoverwerking, omdat amateurfoto's meestal op slecht verlichte plaatsen worden gemaakt. De helderheid van het filter is instelbaar van 0% (een volledig zwart beeld) tot het vrijwel volledig verdwijnen van het beeld. Het oorspronkelijke punt is gedefinieerd als 100% en de waarde kan ook als breuk worden opgegeven.

Origineel

Filter

Zweefeffect

/*statische regel*/ .efbrig1 img( filter: helderheid(150%); -webkit-filter: helderheid(150%); ) /*voor zweefeffect*/ .efbrig2 img( overgang: alle 0,6s gemak 0s; ) .efbrig2:hover img( filter: helderheid(150%); -webkit-filter: helderheid(150%); overgang: alle 0,6s gemak 0s; )

Contrastfilter

Een eenvoudige manier om een afbeelding expressiever te maken is door te experimenteren met de helderheidsinstellingen van de lichtste en donkerste delen van de afbeelding. Het contrastfilter staat klaar om hierbij te helpen. De parameters sluiten, net als vele andere, een negatieve waarde uit (-150%) en de beginpositie wordt aangegeven op 100%. Naast percentages zijn ook breuken (1,5) toegestaan.

Origineel

Filter

Zweefeffect

/*statische regel*/ .efcontr1 img( filter: contrast(150%); -webkit-filter: contrast(150%); ) /*voor zweefeffect*/ .efcontr2 img( overgang: alle 0,6s gemak 0s; ) .efcontr2:hover img( filter: contrast(150%); -webkit-filter: contrast(150%); overgang: alle 0,6s gemak 0s; )

Kleurtoonfilter

Een uitstekende ontwerptechniek in beeldontwerp die past bij de stijl van het hoofdbronontwerp. Het idee is om een tint van de geselecteerde kleur over de originele afbeelding heen te leggen. De verhoudingen komen uit afhankelijk van de gegeven graad, die het kleurpunt aangeeft kleurenwiel.

Als de waarde positief is (150 graden), vindt de rotatie met de klok mee plaats. Dienovereenkomstig, indien negatief, dan tegen de klok in. In twee posities begint het van 0 graden tot 360 graden.

Origineel

Filter

Zweefeffect

/*statische regel*/ .efhrotai1 img( filter: tint-roteren(180deg); -webkit-filter: tint-roteren(180deg); ) /*voor zweefeffect*/ .efhrotai2 img( overgang: alle 0,6s gemak 0s ) .efhrotai2:hover img( filter: tint-roteren(180deg); -webkit-filter: tint-roteren(180deg); overgang: alle 0,6s gemak 0s; )

Inversiefilter

Een specifiek effect waarmee u de kleur van een afbeelding op zijn kop kunt zetten. In grafische editors speelt het een bepaalde rol en het komt voor dat het zonder zijn deelname onmogelijk te bereiken is gewenst resultaat. De parameter voor het omkeren van het filter wordt alleen opgegeven in positieve kant van 0% tot 100%.

Origineel

Filter

Zweefeffect

/*statische regel*/ .efinve1 img( filter: invert(100%); -webkit-filter: invert(100%); ) /*voor zweefeffect*/ .efinve2 img( overgang: alle 0,6s gemak 0s; ) .efinve2:hover img( filter: invert(100%); -webkit-filter: invert(100%); overgang: alle 0,6s gemak 0s; )

Verzadigingsfilter

Wanneer een afbeelding zijn natuurlijke kleur verliest onbekende redenen(zoiets als een vervaagd T-shirt in de zon), waarna het verhogen van de verzadiging onmiddellijk kan herstellen oude uitstraling. En als dit filter in combinatie met andere filters wordt gebruikt, zal het resultaat zeer bevredigend zijn. De instelling vindt plaats vanaf 0 originele weergave, tot grote aantallen.

Origineel

Filter

Zweefeffect

/*statische regel*/ .efsatut1 img( filter: saturate(165%); -webkit-filter: saturate(165%); ) /*voor hover effect*/ .efsatut2 img( overgang: alle 0.6s gemak 0s; ) .efsatut2:hover img( filter: saturate(165%); -webkit-filter: saturate(165%); overgang: alle 0.6s gemak 0s; )

Sepia-filter

Imitatie van het effect van oude foto's (lichtbruine tint). Dit bereikt retro-stijl afbeeldingen die bijzonder populair zijn. Het sepiafilter is instelbaar van 0% (thuispositie) tot 100%.

Origineel

Filter

Zweefeffect

/*statische regel*/ .efsepiaa1 img( filter: sepia(100%); -webkit-filter: sepia(100%); ) /*voor zweefeffect*/ .efsepiaa2 img( overgang: alle 0,6s gemak 0s; ) .efsepiaa2:hover img( filter: sepia(100%); -webkit-filter: sepia(100%); overgang: alle 0,6s gemak 0s; )

Transparantie filteren

Een filter dat lijkt op de eigenschap Opacity uit de trapsgewijze tabel versie 3. De syntaxis is hetzelfde en de transparantiewaarde is instelbaar van 0% tot 100% (oorspronkelijke positie).

Origineel

Filter

Zweefeffect

/*statische regel*/ .efopaty1 img( filter: dekking(50%); -webkit-filter: dekking(50%); ) /*voor zweefeffect*/ .efopaty2 img( overgang: alles 0,6s gemak 0s; ) .efopaty2:hover img( filter: dekking(50%); -webkit-filter: dekking(50%); overgang: alle 0,6s gemak 0s; )

Filterlink

Er wordt een aangepast filter gemaakt op basis van SVG-elementen met een specifieke ID, die vervolgens via een linkfilter in CSS kunnen worden gebruikt. De effecten kunnen heel anders zijn dan standaardfilters, van overlay-maskers tot banale transparantie.

CSS-filtergenerator

Het is al lang de gewoonte om generatoren van verschillende CSS-eigenschappen te maken. , en nog veel, veel meer. Ze dienen als hulpmiddel om het werk gemakkelijker te maken. En voor beginnende webmasters kunnen ze dubbele voordelen hebben. Ze zijn heel gemakkelijk te gebruiken: verplaats de schuifregelaars en je ziet meteen de resultaten. En als u klaar bent, hoeft u alleen nog maar de gegenereerde code te kopiëren. Hetzelfde geldt voor CSS-filtergeneratoren. Hier zijn er twee ter referentie:

Conclusie

De recensie bleek behoorlijk groot, maar ik hoop dat iemand er in de praktijk iets aan zal hebben. Vergeet ook niet om filters te combineren: één is goed, maar twee zullen in bepaalde gevallen beter zijn.

CSS3-filters reproduceer visuele effecten in de browser, vergelijkbaar met Photoshop-filters. Filters kunnen niet alleen aan afbeeldingen worden toegevoegd, maar ook aan niet-lege elementen.

De set filters is niet beperkt tot de filters die vooraf in de browser zijn geïnstalleerd. U kunt ook SVG-filters gebruiken door deze samen met het SVG-element via de link te downloaden.

Filters zijn oorspronkelijk gemaakt als onderdeel van de SVG-specificatie. Hun taak was om op pixelrasters gebaseerde effecten toe te passen op vectorafbeeldingen. Met browserondersteuning voor SVG is het nu mogelijk om deze effecten rechtstreeks in browsers te gebruiken.

Browsers verwerken de pagina pixel voor pixel, passen de opgegeven effecten toe en tekenen het resultaat bovenop het origineel. Door meerdere filters te gebruiken, kunt u dus verschillende effecten bereiken; ze lijken elkaar te overlappen. Hoe meer filters, hoe langer het duurt voordat de browser de pagina weergeeft.

U kunt meerdere filters tegelijkertijd toepassen. Klassieke manier dergelijke effecten toepassen - wanneer u over een element zweeft: hover .

Browser-ondersteuning

D.W.Z: ondersteunt niet
Rand: 13.0 behalve URL()
Firefox: 35.0
Chroom: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
iOS-Safari: 9.3, 6.1 -webkit-
Android-browser: 53.0, 4.4 -webkit-
Chroom voor Android: 55.0, 47.0 -webkit-

filter
vervagen()	De waarde wordt opgegeven in lengte-eenheden, bijvoorbeeld px, em. Past een Gaussiaanse vervaging toe op de originele afbeelding. Hoe groter de straalwaarde, hoe groter de vervaging. Als er geen straalwaarde is opgegeven, is de standaardwaarde 0. Syntaxis filteren: vervagen(3px);
helderheid()	De waarde wordt opgegeven in % of in decimalen. Verandert de helderheid van het beeld. Hoe hoger de waarde, hoe helderder het beeld. De standaardwaarde is 1. Syntaxis filteren: helderheid (50%); filteren: helderheid(.5);
contrast()	De waarde wordt gespecificeerd in % of decimale breuken. Past het contrast van het beeld aan, d.w.z. het verschil tussen de donkerste en lichtste delen van de afbeelding/achtergrond. De standaardwaarde is 100%. Een waarde nul verbergt de originele afbeelding onder een donkergrijze achtergrond. Waarden die oplopen van 0 naar 100% of 0 naar 1 zullen de originele afbeelding geleidelijk openen naar de originele weergave, en waarden daarboven zullen het contrast tussen hooglichten en schaduwen vergroten. Syntaxis filteren: contrast(20%); filteren: contrast(.2);
slagschaduw()	Het filter werkt op dezelfde manier als de eigenschappen Box-Shadow en Text-Shadow. Gebruikt de volgende waarden: Offset X-as Offset Y-as Vervaging Uitrekken Schaduwkleur. Onderscheidend kenmerk filter is dat er een schaduw wordt toegevoegd aan elementen en de inhoud ervan, rekening houdend met hun transparantie, d.w.z. als het element tekst bevat, voegt het filter een schaduw toe voor zowel de tekst als de zichtbare randen van het blok. In tegenstelling tot andere filters is het voor dit filter noodzakelijk om parameters in te stellen (het minimum is de offsetwaarde). Syntaxis filter: slagschaduw (2px 3px 5px zwart);
grijswaarden()	Haalt alle kleuren uit de afbeelding en maakt de uitvoer zwart-wit beeld. De waarde wordt gespecificeerd in % of decimale breuken. Hoe hoger de waarde, hoe sterker het effect. Syntaxis filter: grijswaarden(.5); filter: grijstinten (50%);
tint-roteren()	Verandert de kleuren van de afbeelding afhankelijk van gegeven hoek rotatie in het kleurenwiel. De waarde wordt opgegeven in graden van 0 graden tot 360 graden. 0deg is de standaardwaarde, wat betekent dat er geen effect is. Syntaxis filter: tint-roteren (180 graden);
omkeren()	Het filter maakt het beeld negatief. De waarde wordt opgegeven in %. 0% past geen filter toe, 100% converteert kleuren volledig. Syntaxis filteren: omkeren (100%);
dekking()	Het filter werkt op dezelfde manier als dekkingseigenschap, waardoor transparantie aan het element wordt toegevoegd. Een onderscheidend kenmerk is dat browsers hardwareversnelling voor het filter bieden, wat de prestaties verbetert. Extra bonus- het filter kan tegelijkertijd met andere filters worden gecombineerd, waardoor er interessante effecten. De waarde is alleen ingesteld op %, 0% maakt het element volledig transparant en 100% heeft geen effect. Syntaxis filteren: dekking (30%);
verzadigen()	Regelt de kleurverzadiging en werkt volgens het principe van een contrastfilter. Een waarde van 0% verwijdert kleur, terwijl 100% geen effect heeft. Waarden van 0% tot 100% verminderen de kleurverzadiging, waarden boven de 100% verhogen de kleurverzadiging. De waarde kan worden opgegeven in % of als een geheel getal, 1 is gelijk aan 100% . Syntaxis filter: verzadigd (300%);
sepia()	Een effect dat de oudheid en ‘retro’ imiteert. Een waarde van 0% verandert niet verschijning element, en reproduceert het sepia-effect 100% volledig. Syntaxis filteren: sepia(150%);
url()	De functie accepteert de locatie van een extern XML-bestand met een SVG-filter, of een anker naar een filter in het huidige document. Syntaxis filteren: url(#filterId); /* als het filter in dit document staat / filter: url(filter.svg#filterId); / als het filter met id="filterId" zich in het bestand filter.svg*/ bevindt
geen	Standaardwaarde. Geeft geen effect aan.
voorletter	Stelt deze eigenschap in op de standaardwaarde.
erven	Erft de eigenschapswaarde van het bovenliggende element.