Share
Overweeg een situatie waarin u contrastrijke, vervaagde of helderdere versies van bepaalde afbeeldingen op uw website moet hebben. Voorafgaand aan CSS-filters waren uw enige opties ofwel om verschillende versies van deze afbeeldingen te uploaden of om de afbeeldingen met JavaScript te manipuleren.
Tenzij u de pixels in de originele afbeelding wilt manipuleren, bieden CSS-filters een eenvoudige uitweg. Laten we deze tutorial beginnen met een korte bespreking van alle beschikbare filters.
Dit filter past een Gaussiaanse vervaging toe op uw afbeeldingen. U moet een lengtewaarde opgeven die bepaalt hoeveel pixels in elkaar moeten overvloeien. Dit betekent dat een grotere waarde een waziger beeld oplevert. Houd er rekening mee dat u het percentage niet kunt gebruiken om de vervagingsradius te bepalen. Als u geen parameter opgeeft, wordt de waarde 0 gebruikt. De juiste syntaxis voor het gebruik van dit filter is:
filter: vervagen ()
De blur () filter accepteert geen negatieve waarden.
Dit filter past een lineaire vermenigvuldiger toe op uw afbeeldingen, waardoor ze helderder of zwakker worden in vergelijking met de originele afbeeldingen. Het accepteert zowel een aantal als een percentage. Bij 0% krijgt u een volledig zwarte afbeelding. Bij 100% krijgt u de originele afbeelding zonder wijzigingen. Hogere waarden resulteren in helderdere afbeeldingen. Een voldoende hoge waarde zal het beeld meestal wit maken. De juiste syntaxis om dit filter te gebruiken is:
filter: helderheid ([| ])
Dit filter accepteert ook geen negatieve waarden.
Dit filter verandert het contrast van uw afbeeldingen. Net als het helderheidsfilter accepteert het zowel een aantal als procentuele waarden. Een waarde van 0% resulteert in een volledig grijs beeld. De waarde instellen op 100% heeft geen effect. Waarden hoger dan 100% produceren afbeeldingen met hoog contrast. Het is niet toegestaan om negatieve waarden te gebruiken met de contrast() filter. De juiste syntaxis om dit filter te gebruiken is:
filter: contrast ([| ])
Bijna iedereen van jullie heeft misschien minstens één keer boksschaduwen gebruikt. Het probleem met doosschaduwen is dat ze boxy zijn. Je kunt ze niet gebruiken om schaduwen van onregelmatige vormen te maken. Aan de andere kant, de drop-shadow filter maakt schaduwen rond de grens van een afbeelding. Het is in feite een vervaagde versie van het alpha-masker van het invoerbeeld. De juiste syntaxis om te gebruiken drop-shadow is:
filter: slagschaduw (2,3 ? )
De eerste twee lengtewaarden zijn vereist en zij stellen de horizontale en verticale schaduwverschuiving in. De derde
Dit filter maakt uw afbeeldingen grijswaarden. Een 0% -waarde laat de afbeelding ongewijzigd, terwijl een waarde van 100% de afbeelding volledig grijstinten maakt. Elke waarde tussen deze twee effecten zal een lineaire vermenigvuldiger voor dit effect zijn. U kunt geen negatieve waarden gebruiken met de grijstinten () filter. De juiste syntaxis om dit filter te gebruiken is:
filter: grijswaarden ([| ])
Dit filter past een tintrotatie op uw afbeeldingen toe. De parameter (doorgegeven als een hoek) bepaalt het aantal graden rond de kleurencirkel waarin de afbeeldingen worden aangepast. Met een waarde van 0deg blijft de uiteindelijke afbeelding ongewijzigd. Als u een waarde boven 360 graden opgeeft, loopt het filter rond. De juiste syntaxis om dit filter te gebruiken is:
filter: hue-rotate ()
Dit filter zal uw afbeeldingen omdraaien. De hoeveelheid inversie is afhankelijk van de waarde van de parameter die u hebt gepasseerd. Een 0% inversie heeft geen effect op de afbeelding. Aan de andere kant zal een waarde van 100% de afbeelding volledig omkeren. Een waarde van 50% levert een volledig grijs beeld op. Elke waarde tussen de extremen zal een lineaire vermenigvuldiger van het effect zijn. Dit filter accepteert geen negatieve waarden. De juiste syntaxis om de. Te gebruiken omkeren() filter is:
filter: omkeren ([| ])
Het dekkingsfilter past transparantie toe op het invoerbeeld. Een waarde van 0% houdt in dat u een dekking van 0% wilt, wat resulteert in volledige transparantie. Evenzo resulteert een waarde van 100% in een volledig ondoorzichtig beeld.
Het filter is vergelijkbaar met de opaciteitseigenschap in CSS. Het enige verschil is dat in dit geval sommige browsers hardwareversnelling kunnen bieden voor betere prestaties. De juiste syntaxis om dit filter te gebruiken is:
filter: dekking ([| ]);
Dit filter bepaalt de verzadiging van uw afbeeldingen. De verzadiging zelf is afhankelijk van de waarde van de parameter. U kunt geen negatieve waarden gebruiken met dit filter. Bij 0%, de minimaal mogelijke waarde, is de afbeelding volledig onverzadigd. Met een verzadigingswaarde van 100% blijft het beeld ongewijzigd. Om superverzadigde afbeeldingen te krijgen, moet u waarden van meer dan 100% gebruiken. De juiste syntaxis om dit filter te gebruiken is:
filter: verzadigen ([| ])
Met dit filter worden uw originele afbeeldingen in sepia omgezet. Bij een waarde van 100% krijgt u een volledig sepia en een waarde van 0% heeft geen effect op de afbeelding. Alle andere waarden die daartussen liggen, zijn lineaire vermenigvuldigers van dit filter. Het is niet toegestaan om negatieve waarden te gebruiken met dit filter. De juiste syntaxis om de. Te gebruiken sepia() filter is:
filter: sepia ([| ])
Er kunnen situaties zijn waarin u uw eigen filters op afbeeldingen wilt gebruiken. De url filter neemt de locatie van een XML-bestand dat een SVG-filter opgeeft. Het accepteert ook een anker voor een specifiek filterelement. Hier is een voorbeeld dat resulteert in posterisatie van onze afbeelding:
// Het filter // Vereiste CSS om dit filterfilter toe te passen: url (#posterize);
Het uiteindelijke resultaat na het toepassen van het filter lijkt op de volgende afbeelding:
Als u niet tevreden bent met de uitvoer van een afzonderlijk filter, kunt u een combinatie ervan toepassen op één afbeelding. De volgorde waarin u de filters toepast, kan marginaal verschillende resultaten opleveren. Meerdere filters kunnen op de volgende manier worden toegepast:
filter: sepia (0,8) contrast (2); filter: verzadiging (0,5) tint-roteer (90 graden) helderheid (1,8);
Wanneer u meerdere filters samen gebruikt, wordt de eerste filterfunctie in de lijst toegepast op de originele afbeelding. Daaropvolgende filters worden toegepast op de uitvoer van de vorige filters. Deze demo toont twee andere filtercombinaties in actie.
In sommige speciale omstandigheden kan de volgorde van de filters totaal verschillende resultaten opleveren. Gebruik bijvoorbeeld sepia() na grijstinten () zal een sepia-uitvoer produceren en gebruiken grijstinten () na sepia() resulteert in een uitvoer in grijstinten.
De filtereigenschap kan worden geanimeerd. Met de juiste combinatie van afbeeldingen en filters kunt u deze functie gebruiken om verbluffende effecten te creëren. Overweeg het onderstaande codefragment:
@keyframes dag-nacht 0% filter: hue-rotate (0deg) brightness (120%); 10% filter: hue-rotate (0deg) helderheid (120%); 20% filter: hue-rotate (0deg) helderheid (150%); 90% filter: hue-rotate (180deg) helderheid (10%); 100% filter: hue-rotate (180deg) helderheid (5%);
Ik gebruik de hue-rotate () en helderheid() filter samen om de illusie van dag en nacht te creëren. De originele afbeelding zelf heeft een oranje tint. Tot 20% van de animatie verhoog ik de helderheid geleidelijk en houd de tint-rotatie op nul. Dit creëert het effect van een zonnige dag. Tegen de tijd dat de animatie eindigt, draai ik de tint 180 graden. Dit resulteert in een blauwe tint. Dit combineren met een zeer lage helderheid creëert het effect van de nacht.
Naast de 11 filters die we hierboven bespraken, is er ook een aangepaste () filter. Hiermee kunt u volledig verschillende soorten effecten maken met behulp van shaders. Er zijn een paar problemen met aangepaste () filters die hun ontwikkeling hebben gestopt. Adobe werkt actief aan oplossingen voor problemen die zich voordoen tijdens het gebruik aangepaste () filters. Hopelijk zijn ze binnenkort beschikbaar voor ontwikkelaars om te gebruiken in hun projecten.
Laten we weer op het goede spoor gaan. Filters worden toegepast op alle delen van het doelelement, inclusief tekst, achtergrond en randen. Hier is een eenvoudige demo om een combinatie van filters op verschillende afbeeldingen uit te proberen.
Zoals u in de laatste twee secties hebt gezien, kunnen CSS-filters de afbeeldingen waarop ze worden toegepast volledig veranderen. Soms is dat echter niet voldoende. In het volgende deel van deze serie zal ik bespreken hoe mengmodi kunnen worden gebruikt om afbeeldingen te bewerken.
Accentsconagua