Het kan nodig zijn om een afbeelding zo snel mogelijk en zonder gebruik van grafische editors grijs te maken. Uiteraard kunt u de grafische editor van Adobe Photoshop gebruiken (u kunt zelfs de diepte en toon instellen). Natuurlijk kun je dergelijke parameters niet in de browser configureren, maar onze ogen (tenzij je natuurlijk een professional bent) zullen het verschil nauwelijks merken.
In dit artikel gaan we kijken naar manieren om een afbeelding grijs te maken.
1. CSS-filter
Gebruik van het pand filter is misschien wel de gemakkelijkste manier om een zwart-witafbeelding te maken. Om in IE een zwart-witafbeelding te maken, moet u ook de eigenschap gebruiken filter.
Tegenwoordig eigendom filter is onderdeel van de CSS3-technologie, die wordt ondersteund door browsers als Firefox, Chrome en Safari. Webkit-filters kunnen niet alleen een zwart-witeffect creëren, maar kunnen ook sepia- en onscherpte-effecten geven.
Om de afbeelding grijs te maken, moet u de volgende eigenschappen instellen:
Deze code werkt in IE6-9, Chrome18+, Safari 6.0+ en Opera15+.
2. Javascript
Een alternatief voor de bovenstaande code is Javascript, dat in alle browsers werkt, indien ingeschakeld, inclusief IE6 en lager.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | var imgObj = document.getElementById("js-image" );< imgPixels.height ; y++ ) { for (var x = 0 ; x < imgPixels.width ; x++ ) { var i = (y * 4 ) * imgPixels.width + x * 4 ; var avg = (imgPixels.data [ i] + imgPixels.data [ i + 1 ] + imgPixels.data [ i + 2 ] ) / 3 ; imgPixels.data [ i] = avg; imgPixels.data [ i + 1 ] = avg; imgPixels.data [ i + 2 ] = avg; } } canvasContext.putImageData (imgPixels, 0 , 0 , 0 , 0 , imgPixels.width , imgPixels.height ) ; return canvas.toDataURL () ; } imgObj.src = gray(imgObj) ; |
functie grijs(imgObj) ( var canvas = document.createElement ("canvas" ); var canvasContext = canvas.getContext ("2d" ); var imgW = imgObj.width ; var imgH = imgObj.height ; canvas.width = imgW; canvas.height = imgH; canvasContext.drawImage (imgObj, 0, 0);
Met Javascript kunnen we een afbeelding een zwart-witeffect geven, bijvoorbeeld door op de afbeelding te zweven en erop te klikken. U kunt jQuery samen gebruiken om een vloeiend fade-to-grey-effect te creëren. Het enige nadeel is dat Javascript mogelijk is uitgeschakeld in de browser.
3. SVG
Een andere manier is om SVG-filters te gebruiken.
Het enige dat u hoeft te doen, is een SVG-bestand maken en de onderstaande code gebruiken:
| 1 2 3 4 | Je kunt alle code ook rechtstreeks in CSS schrijven: img (filter: url ( |
#grijswaarden");"
Het resultaat zal vergelijkbaar zijn.
Om dit effect in alle browsers te ondersteunen, is het noodzakelijk om alle methoden te combineren. Deze code werkt in Firefox 3.5+, Opera15+, Safari, Chrome en IE.
| 1 2 3 4 5 6 7 8 | img ( -webkit-filter: grijswaarden(100% ) ; -webkit-filter: grijswaarden(1 ) ; filter: grijswaarden(100% ) ; filter: url ("../img/gray.svg#grayscale" ); filter : grijs ; |
Deze code kan worden gebruikt in combinatie met Javascript en als Javascript is uitgeschakeld, werkt deze code. Modernizr kan hierbij helpen.
Modernizr voegt hieraan toe js class voor body, als Javascript is ingeschakeld in de browser, en registreert de klasse nee-js als JavaScript is uitgeschakeld. En het enige dat nog in CSS moet worden geschreven, is het volgende:
| 1 2 3 4 5 6 7 8 | .no-js img ( -webkit-filter: grijswaarden(100% ) ; -webkit-filter: grijswaarden(1 ) ; filter: grijswaarden(100% ) ; filter: url ("../img/gray.svg#grayscale ") ; filter: grijs ; ) |
CSS3-filters zijn een zeer interessante uitloper van SVG, waarmee u HTML-elementen en afbeeldingen kunt wijzigen door vervaging, helderheid en vele andere filters toe te passen. In deze tutorial bekijken we kort hoe ze precies werken.
Hoe werkt dit?
Met alleen CSS kunnen we behoorlijk complexe effecten creëren. Ze kunnen worden toegepast op zowel afbeeldingen als HTML-elementen. De eigenschap die wordt gebruikt om al deze effecten te beheersen is filter.
filteren: filter(waarde) ;
Zoals u zou verwachten, vereist deze eigenschap het gebruik van een browservoorvoegsel. Maar voorlopig alleen -webkit-(Chrome en Safari) zijn de enige browser-engines die deze eigenschap ondersteunen.
Webkit-filter: filter(waarde) ;
-moz-filter: filter(waarde) ;
-o-filter: filter(waarde) ;
-ms-filter: filter(waarde) ;
Filtratie
Er zijn een aantal filters, dus laten we ze afzonderlijk bekijken om ze allemaal beter te begrijpen. Op één element kunnen meerdere filters worden toegepast (gescheiden door een spatie), bijvoorbeeld helderheid En vervagen:
filter: vervagen(5px) helderheid(0.5);
Er zijn verschillende filters die hieronder niet worden behandeld, maar die eenvoudig kunnen worden geïmplementeerd met bestaande CSS (transparantie en schaduwen). Hier is de originele afbeelding die we zullen gebruiken om te demonstreren hoe de filters werken:
Ik zal een foto tonen waarop het filter is toegepast (eerste foto) en het resultaat van het filter in de vorm van een statische afbeelding (tweede foto), als u een browser gebruikt die geen filters ondersteunt en het resultaat niet kunt zien.
Vervagen
Heb je ooit een Gaussiaanse vervaging op een afbeelding of tekst willen aanbrengen met alleen CSS? Met filters kan het! Vervaging wordt gemeten in pixels, dus je zou zoiets als dit kunnen doen:
filteren: vervagen(5px);
// Browserspecifiek
-webkit-filter: vervagen(5px);
-moz-filter: vervagen(5px);
-o-filter: vervagen(5px);
-ms-filter: vervagen(5px);
Helderheid
De helderheid wordt gemeten van nul tot één, waarbij 1 de volledige helderheid (wit) is en 0 de oorspronkelijke helderheid.
filteren: helderheid(0,2);
// Browserspecifiek
-webkit-filter: helderheid (0,2);
-moz-filter: helderheid (0,2);
-o-filter: helderheid (0,2);
-ms-filter: helderheid (0,2);
Verzadiging
Verzadiging wordt gemeten als een percentage.
filter: verzadigen(50%);
// Browserspecifiek
-webkit-filter: verzadigen(50%);
-moz-filter: verzadigen(50%);
-o-filter: verzadigen(50%);
-ms-filter: verzadigen(50%);
Toon rotatie
Met dit filter kun je de toon veranderen door eraan te draaien (denk aan een kleurenwiel dat je vervolgens ronddraait). Het wordt gemeten in graden.
filter: tint-roteren (20 graden);
// Browserspecifiek
-webkit-filter: tint-roteren (20 graden);
-moz-filter: tint-roteren(20deg);
-o-filter: tint-roteren (20 graden);
-ms-filter: tint-roteren(20deg);
Contrast
Het contrast wordt wederom gemeten als een percentage. 100% is de standaardwaarde, 0% zorgt voor een volledig zwart beeld. Alles meer dan 100% voegt contrast toe!
filteren: contrast(150%) ;
// Browserspecifiek
-webkit-filter: contrast(150%);
-moz-filter: contrast(150%);
-o-filter: contrast(150%);
-ms-filter: contrast(150%);
Inversie
Ook gemeten als een percentage. Beschikbare waarden variëren van 0% tot 100%. Vreemd genoeg ondersteunt webkit op dit moment geen inversies als deze minder dan 100% zijn.
filteren: omkeren (100%);
// Browserspecifiek
-webkit-filter: omkeren (100%);
-moz-filter: omkeren (100%);
-o-filter: omkeren (100%);
-ms-filter: omkeren (100%);
Bleken
Voer opnieuw het percentage in waarmee u de afbeelding wilt desatureren. Beschikbare waarden variëren van 0% tot 100%.
filter: grijswaarden(100%);
// Browserspecifiek
-webkit-filter: grijstinten (100%);
-moz-filter: grijswaarden(100%);
-o-filter: grijstinten (100%);
-ms-filter: grijstinten (100%);
Sepia
Ik denk dat dit erg handig is als je iets op Instagram wilt posten. Al neem ik ook aan dat je hiervoor geen CSS gaat gebruiken. In ieder geval zullen deze grijstinten en negatieven bij elkaar opgeteld sepia aan de afbeelding toevoegen. 100% is een volledig sepia, 0% is de originele afbeelding.
filteren: sepia(100% );
// Browserspecifiek
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
Browser-ondersteuning
| Webkit | Mozilla | Drietand | Presto | |
| Vervagen | Experimenteel | Nee | Nee | Nee |
| Helderheid | ||||
| Verzadiging | ||||
| Tonen roteren | ||||
| Contrast | ||||
| Inversie | Alleen volledige inversie |
|||
| Bleken | Experimenteel | |||
| Sepia |
Als u vragen heeft, raden wij u aan onze te gebruiken
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 verschillende 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. De klassieke manier om dergelijke effecten toe te passen is door over een element te bewegen: 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-
Chrome 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. |
| helderheid() | De waarde wordt gespecificeerd in % of decimale breuken. Verandert de helderheid van het beeld. Hoe hoger de waarde, hoe helderder het beeld. De standaardwaarde is 1. |
| 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 van 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. |
| slagschaduw() | Het filter werkt op dezelfde manier als de eigenschappen Box-Shadow en Text-Shadow. Gebruikt de volgende waarden: X-offset Y-offset vervaging uitrekken schaduwkleur. Het onderscheidende kenmerk van het filter is dat de schaduw wordt toegevoegd aan de 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). |
| grijswaarden() | Haalt alle kleuren uit een afbeelding, waardoor de uitvoer een zwart-witafbeelding wordt. De waarde wordt gespecificeerd in % of decimale breuken. Hoe hoger de waarde, hoe sterker het effect. |
| tint-roteren() | Verandert de kleuren van de afbeelding afhankelijk van de opgegeven rotatiehoek 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. |
| omkeren() | Het filter maakt het beeld negatief. De waarde wordt opgegeven in %. 0% past geen filter toe, 100% converteert kleuren volledig. |
| dekking() | Het filter werkt op dezelfde manier als de eigenschap Opacity, waardoor transparantie aan een element wordt toegevoegd. Een onderscheidend kenmerk is dat browsers hardwareversnelling voor het filter bieden, wat de prestaties verbetert. Een extra bonus is dat het filter tegelijkertijd met andere filters kan worden gecombineerd, waardoor interessante effecten ontstaan. De waarde is alleen ingesteld op %, 0% maakt het element volledig transparant en 100% heeft geen effect. |
| 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% . |
| sepia() | Een effect dat de oudheid en ‘retro’ imiteert. Een waarde van 0% verandert het uiterlijk van het element niet, en een waarde van 100% reproduceert het sepia-effect volledig. |
| 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. |
| geen | Standaardwaarde. Geeft geen effect aan. |
| voorletter | Stelt deze eigenschap in op de standaardwaarde. |
| erven | Erft de eigenschapswaarde van het bovenliggende element. |
CSS-eigenschappen hebben een zodanig ontwikkelingsniveau bereikt dat ze enkele belangrijke functies van grafische editors aankunnen. Een voorbeeld hiervan zijn CSS-filters, waarmee je prachtige effecten voor afbeeldingen kunt creëren.
Was het vroeger moeilijk voor te stellen, nu zijn bijna alle softwarefilters in de cascadetabel geïmplementeerd, van vervaging tot artistieke kleurmodellen.
Maar er is nog steeds een klein nadeel aan CSS-filters: niet alle webbrowsers ondersteunen 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 enkele 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”. Past grijstinten toe op de afbeelding op basis van het percentage dat u opgeeft. 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 zweefeffect tonen van het bewegen van de muiscursor over de afbeelding.
Vervagingsfilter
In grafische editors is het vervagingsfilter een onmisbaar hulpmiddel en wordt het vaak gebruikt op het werk. Het kan gemakkelijk een wazig beeld creëren, maar kan het effect creëren dat er op een specifiek element wordt scherpgesteld terwijl de rest van het beeld onder de vervaging valt. 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 naar ons toe met de derde versie van de trapsgewijze tabel. 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 uitrekkende en ingevoegde waarden, en voegt ook meerdere schaduwen toe, gescheiden door komma's. Maar ondanks dit alles zijn er enkele voordelen: het filter houdt bijvoorbeeld rekening met pseudo-elementen, waardoor u de exacte vorm van de schaduw van het element kunt weergeven.
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 altijd 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 op het kleurenwiel aangeeft.
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 zonder zijn deelname het gewenste resultaat niet kan worden bereikt. De parameter voor het omkeren van het filter wordt alleen in de positieve richting gespecificeerd, van een waarde 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 om onbekende redenen zijn natuurlijke kleur verliest (bijvoorbeeld een door de zon gebleekt T-shirt), kan het verhogen van de verzadiging het oorspronkelijke uiterlijk onmiddellijk herstellen. En als dit filter in combinatie met andere filters wordt gebruikt, zal het resultaat zeer bevredigend zijn. De instelling is gemaakt van 0 initiële 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). Hierdoor wordt een retro-beeldstijl bereikt, die vooral populair is. 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, maar 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 het resultaat. 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.
Hallo. Tegenwoordig verras je niemand meer met mooie effecten op websites. Sommigen doen dit al tien jaar in Flash, anderen zijn er nog niet mee gestopt in Javascript, maar de meest geavanceerde gebruiken al heel lang CSS3. Dit is wat we vandaag gaan doen.
Laten we leren hoe we een CSS-afbeelding (CSS) kunnen verkleuren, en dit op een prachtige manier kunnen doen
Laten we dus met iets simpels beginnen, we hebben mooie foto's nodig, laten we dit nemen:
We moeten het desatureren (desatureer de CSS-afbeelding - verwijder de kleuren, maak de afbeelding zwart en wit). Hiervoor (en voor het werken met afbeeldingen in het algemeen) heeft CSS3 een speciale filtertool.
Dit is wat we zullen gebruiken.
Oplossing: verkleur de CSS-afbeelding
Laten we eerst de afbeelding zelf indelen:
Vervolgens voegen we een stijl toe aan de afbeelding:
Img ( -webkit-filter: grijswaarden(100%); -moz-filter: grijswaarden(100%); -ms-filter: grijswaarden(100%); -o-filter: grijswaarden(100%); filter: grijswaarden( 100%); filter: grijs /* IE 6-9 */ )
Nu wordt ons beeld zwart en wit.
Daar kun je natuurlijk mee stoppen, maar het is veel interessanter als het beeld ook reageert op de acties van de gebruiker.
Ik stel voor om het zo te maken dat wanneer je over de foto beweegt, deze geleidelijk gekleurd wordt.
In feite is dit helemaal niet moeilijk om te doen, en je hoeft helemaal geen Javascript te kennen.
Animeer verkleuringsafbeelding CSS
Laten we iets toevoegen aan onze vorige stijl:
Img ( -webkit-filter: grijswaarden(100%); -moz-filter: grijswaarden(100%); -ms-filter: grijswaarden(100%); -o-filter: grijswaarden(100%); filter: grijswaarden( 100%); filter: grijs; /* IE 6-9 */ ) img:hover ( -webkit-filter: geen; -moz-filter: geen; -ms-filter: geen; -o-filter: geen; filter : geen; filter: geen /* IE 6-9 */ )
Hierdoor wordt de afbeelding gekleurd als u er met de muis overheen beweegt. Laten we ook de CSS3-overgang gebruiken om het verkleuringsproces te animeren:
Img ( -webkit-filter: grijswaarden(100%); -moz-filter: grijswaarden(100%); -ms-filter: grijswaarden(100%); -o-filter: grijswaarden(100%); filter: grijswaarden( 100%); filter: grijs; /* IE 6-9 */ /*Voeg deze code toe*/ -webkit-overgang: alle 1s; */ ) img:hover ( -webkit-filter: geen; -moz-filter: geen; -ms-filter: geen; -o-filter: geen; filter: geen; filter: geen; /* IE 6-9 * / )
De parameter all in transition zegt dat de regel voor alle stijlen werkt, en de tweede parameter is de animatietijd.
In de eerste parameter kunt u een bepaalde eigenschap opgeven (bijvoorbeeld hoogte, om alleen de hoogte te animeren), en in de tweede de tijd in seconden (kan in decimale breuken zijn - 0,1s).
