Bildejustering med CSS-filtereffekter

Justere bildet lysstyrke og Kontrast, eller snu bildet inn gråtoner eller Sephia er en vanlig funksjon du kan finne i bildebehandlingsprogram, som Photoshop. Men det er nå mulig å legge til samme effekter for webbilder ved hjelp av CSS.

Denne egenskapen kommer fra filtereffekter som faktisk er fortsatt i arbeidsprosjektet. Webkit-nettleseren ser imidlertid ut til å være et skritt for å implementere denne funksjonen.

Så, la oss prøve det, og vi vil bruke dette bildet fra Mehdi Kh for å demonstrere effektene.

Effektene

Det er veldig enkelt å bruke effektene. Ta en titt på utklippet nedenfor, for å slå inn bilder gråtoner;

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

... og dette er for sepia ala Instagram.

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

Begge sepia og gråtoner Verdiene er oppgitt i prosent hvor 100% er maksimum og gjelder 0% vil holde bildet uendret, men når verdien ikke er eksplisitt spesifisert, vil 100% vil bli tatt som standard.

Lysere bildet er også mulig, og vi kan gjøre det ved å bruke lysstyrke funksjon, som følger;

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

Lysstyrkeffekten fungerer som kontrasten og sepia-effekten over hvor verdien av 0% vil beholde bildet som det er og søke 100% vil helt lysere bildet, som muligens bare viser en blank hvit side i stedet for et bilde.

Lysstyrkeffekten også tillater negative verdier, der det vil mørk bildet.

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

... og vi kan justere bildekontrasten på denne måten.

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

Det er en liten forskjell på hvordan verdien fungerer også, som du kan se i det ovenstående, setter vi inn kontrast() av 200%, dette er fordi verdien av 100% er utgangspunktet der bildet forblir uendret. Når verdien er under 100%, la oss si 50%, bildet blir mindre motsatt.

Videre kan vi også kombinere effekten i en deklarasjonsblokk, som i eksemplet nedenfor. Vi setter bildet inn i gråtoner og øke kontrast med 50% samtidig.

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

Ved å kombinere filteret med CSS3 overgang kan vi gjøre en grasiøs sveve effekt.

 img: svever -webkit-filter: gråtoner (0%);  img: svever -webkit-filter: sepia (0%);  img: svever -webkit-filter: lysstyrke (0%);  img: svever -webkit-filter: kontrast (100%);  

Til slutt er det en ekstra effekt vi kan prøve; de Gaussian Blur, som vil uklare det målrettede elementet.

 img: svever -webkit-filter: uskarphet (5px);  

Som i Photoshop er uskarphetsverdien oppgitt i pikselradius, og hvis verdien ikke er uttrykkelig oppgitt, vil 0 bli tatt som standard og bildet blir igjen som det er.

Endelig tanke

Det er faktisk mye flere effekter i spesifikasjonen. som for eksempel hue rotering, invert og mette, men jeg tror de er mindre brukt i ekte web-saker. Dermed var diskusjonen begrenset til bare fire effekter.

Og til tross for at diskusjonen blir brukt på bilder i denne opplæringen, kan eiendommen faktisk også brukes på ethvert element i DOM.

Til slutt kan du se live demoen fra disse linkene nedenfor. Vær oppmerksom på at filteret bare støttes for øyeblikket Chrome 19 og over.

• Demo
• Last ned kilde