Beeldaanpassing met CSS-filtereffecten
Aanpassen van het beeld Helderheid en Contrast, of beeld veranderen in grijstinten of sephia is een veelvoorkomende functie die u kunt vinden in de app voor beeldbewerking, zoals Photoshop. Maar het is nu mogelijk om dezelfde effecten toe te voegen aan webafbeeldingen met behulp van CSS.
Deze mogelijkheid komt van de filtereffecten die zich nog steeds in het stadium van de werkfase bevinden. De Webkit-browser lijkt echter een stap voor te zijn bij het implementeren van deze functie.
Dus, laten we het eens proberen en we zullen dit beeld van Mehdi Kh gebruiken om de effecten te demonstreren.
De effecten
Het toepassen van de effecten is heel eenvoudig. Bekijk het onderstaande fragment voor het omzetten van afbeeldingen in grijstinten;
img -webkit-filter: grijsschaal (100%);
... en dit is er voor sepia ala Instagram.
img -webkit-filter: sepia (100%);
Beide sepia en de grijstinten Waarden worden vermeld in percentage waar 100% is het maximum en van toepassing 0% zal het beeld onveranderd houden, maar wanneer de waarde niet expliciet is gespecificeerd de 100% zal als standaard worden genomen.
De afbeelding opfrissen is ook mogelijk en we kunnen dit doen door de helderheid functie, als volgt;
img -webkit-filter: helderheid (50%);
Het helderheidseffect werkt als het contrast en het sepia-effect waarboven de waarde van 0% zal het beeld behouden zoals het is en toepassen 100% zal de afbeelding volledig oplichten, waardoor mogelijk alleen een lege witte pagina in plaats van een afbeelding wordt weergegeven.
Het helderheidseffect ook staat negatieve waarden toe, waarin het zal maak de afbeelding donkerder.
img -webkit-filter: helderheid (-50%);
... en we kunnen het beeldcontrast op deze manier aanpassen.
img -webkit-filter: contrast (200%);
Er is een klein verschil in hoe de waarde werkt, zoals je hierboven kunt zien, hebben we de contrast() door 200%, dit komt omdat de waarde van 100% is het startpunt waar de afbeelding ongewijzigd blijft. Wanneer de waarde lager is 100%, laten we zeggen 50%, de afbeelding zal minder contrasteren.
Bovendien kunnen we het effect ook combineren in één aangifteblok, zoals in het onderstaande voorbeeld. We keren het beeld om grijstinten en verhoog de contrast met 50% op hetzelfde moment.
img -webkit-filter: grijswaarden (100%) contrast (150%);
Door het filter te combineren met CSS3-overgang kunnen we een sierlijke maken zweven effect.
img: hover -webkit-filter: grijstinten (0%); img: hover -webkit-filter: sepia (0%); img: hover -webkit-filter: helderheid (0%); img: hover -webkit-filter: contrast (100%);
Ten slotte is er nog een effect dat we kunnen proberen; de Gaussiaanse vervaging, die het doelelement zal vervagen.
img: hover -webkit-filter: vervagen (5px);
Net als in Photoshop wordt de waarde voor onscherpte weergegeven in de pixelradius en als de waarde niet expliciet wordt vermeld, wordt de 0 als standaard genomen en blijft de afbeelding ongewijzigd.
Laatste gedachte
Er zijn eigenlijk veel meer effecten in de spec. zoals tint draaien, omkeren en verzadigen, maar ik denk dat ze minder worden toegepast in echte Web-cases. De discussie was dus beperkt tot slechts vier effecten.
En ondanks de discussie die in deze zelfstudie op afbeeldingen wordt toegepast, kan de eigenschap ook worden toegepast op elk element in de DOM.
Ten slotte kun je de live demo bekijken via onderstaande links. Houd er rekening mee dat het filter momenteel alleen wordt ondersteund in Chrome 19 en hoger.
- demonstratie
- Download de bron
