Podešavanje slike efektima CSS filtra

Podešavanje slike svjetlost i Kontrast, ili pretvaranje slike u Sivi tonovi ili Sephia je uobičajena značajka koju možete pronaći u aplikaciji za uređivanje slika Photoshop. No, sada je moguće dodati iste efekte web-slikama pomoću CSS-a.

Ta sposobnost dolazi iz filtarskih efekata koji su zapravo još uvijek u radnoj fazi. Međutim, čini se da je Webkit preglednik korak naprijed u implementaciji ove značajke.

Pokušajmo i upotrijebit ćemo ovu sliku od Mehdija Kh za demonstraciju učinaka.

Učinci

Primjena efekata je vrlo jednostavna. Pogledajte isječak u nastavku kako biste slike pretvorili u u sivim tonovima;

 img -webkit-filter: sivi tonovi (100%);  

... i to je za sepija ala Instagram.

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

Oba sepija i u sivim tonovima vrijednosti su izražene u postocima gdje 100% je maksimalno i primjenjuje se 0% će zadržati izmjenu slike, ali kada vrijednost nije izričito navedena 100% bit će zadana.

Osvjetljavanje slike je također moguće, a to možemo učiniti pomoću svjetlost funkcija, kako slijedi;

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

Efekt svjetline funkcionira kao efekt kontrasta i sepije iznad vrijednosti vrijednosti 0% zadržat će sliku onakvu kakva je i primjenjivati 100% će potpuno osvijetliti sliku, koja će možda prikazati samo praznu bijelu stranicu umjesto slike.

Efekt svjetline također dopušta negativne vrijednosti, u kojoj će zatamnite sliku.

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

... i na ovaj način možemo prilagoditi kontrast slike.

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

Postoji i mala razlika u tome kako vrijednost funkcionira, kao što možete vidjeti u gore navedenom, postavljamo kontrast() po 200%, to je zbog vrijednosti 100% je početna točka u kojoj će slika ostati nepromijenjena. Kada je vrijednost ispod 100%, recimo 50%, slika će postati manje kontrastna.

Nadalje, možemo kombinirati učinak u jednom deklaracijskom bloku, kao što je u primjeru u nastavku. Pretvaramo sliku u u sivim tonovima i povećati kontrast za 50% u isto vrijeme.

 img -webkit-filter: kontrast sive boje (100%) (150%);  

Kombinirajući filtar s CSS3 prijelazom možemo napraviti graciozan lebdjeti posljedica.

 img: hover -webkit-filter: sivi tonovi (0%);  img: hover -webkit-filter: sepia (0%);  img: hover -webkit-filter: svjetlina (0%);  img: hover -webkit-filter: kontrast (100%);  

Konačno, postoji još jedan učinak koji možemo pokušati; Gaussian Blur, koji će zamutiti ciljani element.

 img: hover -webkit-filter: zamućenje (5px);  

Kao iu Photoshopu, vrijednost zamućenja se navodi u radijusu piksela, a ako vrijednost nije izričito navedena, 0 će se uzeti kao zadana i slika će ostati kao što je.

Konačna misao

Postoje zapravo mnogo više učinaka u spec. kao što su boja rotiranja, izokrenuti i zasititi, ali mislim da se manje primjenjuju u stvarnim slučajevima weba. Stoga je rasprava bila ograničena na samo četiri učinka.

I unatoč raspravi koja se primjenjuje na slike u ovom priručniku, svojstvo se zapravo može primijeniti i na bilo koji element u DOM-u.

Konačno, možete pogledati demo uživo s ovih veza u nastavku. Imajte na umu da je filtar trenutno podržan samo za Chrome 19 i iznad.

• Demo
• Preuzimanje izvora