Bildjustering med CSS-filtereffekter

Justera bilden ljusstyrka och Kontrast, eller omvandla bilden till Gråskale eller Sephia är en vanlig funktion som du kan hitta i bildredigeringsprogram, som Photoshop. Men det är nu möjligt att lägga till samma effekter på webbbilder med hjälp av CSS.

Denna förmåga kommer från filtereffekterna som faktiskt fortfarande finns i arbetsutkastet. Webkit-webbläsaren verkar dock vara ett steg för att implementera den här funktionen.

Så, låt oss försöka, och vi kommer att använda den här bilden från Mehdi Kh för att visa effekterna.

Effekterna

Att tillämpa effekterna är väldigt enkelt. Ta en titt på biten nedan för att göra bilder till gråskale;

 img -webkit-filter: gråskala (100%);  

... och det här är för sepia ala Instagram.

 img -webkit-filter: sepia (100%);  

Både sepia och den gråskale värden anges i procent där 100% är maximalt och tillämpar 0% kommer att hålla bilden oförändrad, men när värdet inte explicit anges, anger 100% kommer att tas som standard.

Att förbättra bilden är också möjlig, och vi kan göra det genom att använda ljusstyrka funktion, enligt följande;

 img -webkit-filter: ljusstyrka (50%);  

Lysstyrkeffekten fungerar som kontrasten och sepia-effekten ovan där värdet av 0% kommer att behålla bilden som den är och tillämpa 100% kommer helt att lysa upp bilden, vilket möjligen skulle visa en tom vit sida istället för en bild.

Lysstyrkan också möjliggör negativa värden, i vilken det kommer mörka bilden.

 img -webkit-filter: ljusstyrka (-50%);  

... och vi kan justera bildkontrast på så sätt.

 img -webkit-filter: kontrast (200%);  

Det är en liten skillnad på hur värdet fungerar också, som du kan se i ovanstående ställer vi in kontrast() av 200%, detta beror på att värdet av 100% är utgångspunkten där bilden kommer att förbli oförändrad. När värdet är under 100%, låt oss säga 50%, bilden blir mindre kontrasterad.

Dessutom kan vi också kombinera effekten i ett deklarationsblock, som i exemplet nedan. Vi vrider in bilden gråskale och öka kontrast med 50% samtidigt.

 img -webkit-filter: gråskala (100%) kontrast (150%);  

Genom att kombinera filtret med CSS3-övergången kan vi göra en graciös sväva effekt.

 img: sväva -webkit-filter: gråskala (0%);  img: sväva -webkit-filter: sepia (0%);  img: sväva -webkit-filter: ljusstyrka (0%);  img: sväva -webkit-filter: kontrast (100%);  

Slutligen finns det en ytterligare effekt vi kan försöka. de Gaussisk suddighet, som kommer att oskärpa det riktade elementet.

 img: sväva -webkit-filter: oskärpa (5px);  

Som i Photoshop anges blurvärdet i pixelradien och om värdet inte uttryckligen anges, kommer 0 att tas som standard och bilden lämnas som den är.

Slutlig tanke

Det finns faktiskt mycket mer effekter i spec. som nyans-rotera, invertera och mätta, men jag tror att de är mindre tillämpade i reella webbfall. Diskussionen var således begränsad till bara fyra effekter.

Och trots att diskussionen tillämpas på bilder i den här handledningen kan egendomen faktiskt också tillämpas på något element i DOM.

Slutligen kan du se live demo från dessa länkar nedan. Observera att filtret endast stöds för närvarande i Chrome 19 och ovan.

• demo
• Hämta källa