Billedjustering med CSS-filtereffekter

Justere billede lysstyrke og Kontrast, eller dreje billede til gråtoner eller Sephia er en almindelig funktion, du kan finde i billedredigeringsprogram, som Photoshop. Men det er nu muligt at tilføje de samme effekter til webbilleder ved hjælp af CSS.

Denne evne kommer fra filtereffekterne, som faktisk stadig er i arbejdspapirfasen. Webkit-browseren ser imidlertid ud til at være et skridt i hovedet ved gennemførelsen af ​​denne funktion.

Så lad os prøve det, og vi vil bruge dette billede fra Mehdi Kh til at demonstrere effekterne.

Virkningerne

Anvendelsen af ​​virkningerne er meget let. Tag et kig på nedenstående stykke, for at gøre billeder til gråtoner;

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

... og dette er til sepia ala Instagram.

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

Både sepia og gråtoner værdier er angivet i procent hvor 100% er maksimum og ansøgning 0% vil holde billedet uændret, men når værdien ikke udtrykkeligt angives, 100% vil blive taget som standard.

Forbedring af billedet er også muligt, og vi kan gøre det ved at bruge lysstyrke funktion som følger

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

Lysstyrkeffekten fungerer som kontrasten og sepia-effekten ovenfor, hvor værdien af 0% vil holde billedet som det er og anvende 100% vil helt lysere billedet, hvilket muligvis kun viser en tom hvid side i stedet for et billede.

Lysstyrken effekt også tillader negative værdier, hvor det vil mørk billedet.

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

... og vi kan justere billedkontrasten på denne måde.

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

Der er en lille forskel på, hvordan værdien fungerer også, som du kan se i ovenstående, sætter vi kontrast() ved 200%, dette skyldes værdien af 100% er udgangspunktet, hvor billedet forbliver uændret. Når værdien er under 100%, lad os sige 50%, billedet bliver mindre modsat.

Desuden kan vi også kombinere effekten i en declarationsblok, som i eksemplet nedenfor. Vi vender billedet ind gråtoner og øge kontrast med 50% på samme tid.

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

Ved at kombinere filteret med CSS3 overgang kan vi gøre en yndefuld hover effekt.

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

Endelig er der endnu en effekt, vi kan prøve; det Gaussisk sløring, som vil sløre det målrettede element.

 img: hover -webkit-filter: blur (5px);  

Ligesom i Photoshop er blurværdien angivet i pixelradius, og hvis værdien ikke udtrykkeligt er angivet, vil 0 blive taget som standard og billedet er tilbage som det er.

Endelig tanke

Der er faktisk meget flere effekter i spec. såsom farvetone Roter, invertsukker og mætte, men jeg tror, ​​at de er mindre anvendt i ægte websager. Diskussionen var således begrænset til kun fire effekter.

Og til trods for at diskussionen bliver anvendt på billeder i denne tutorial, kan ejendommen faktisk også anvendes til ethvert element i DOM.

Endelig kan du se live demoen fra nedenstående links. Vær opmærksom på, at filteret kun understøttes i øjeblikket Chrome 19 og over.

• Demo
• Download kilde