Prilagoditev slike z učinki filtra CSS

Prilagajanje slike Svetlost in Kontrast, ali spreminjanje slike v Sivine ali Sephia je skupna funkcija, ki jo lahko najdete v aplikaciji za urejanje slik, na primer Photoshop. Vendar pa je zdaj mogoče dodati enake učinke za spletne slike s pomočjo CSS.

Ta zmožnost izhaja iz filtra Effects, ki je dejansko še vedno v fazi delovnega osnutka. Vendar pa se zdi, da je brskalnik Webkit korak pri izvajanju te funkcije.

Zato poskusimo in to sliko bomo uporabili od Mehdija Kh za prikazovanje učinkov.

Učinki

Uporaba učinkov je zelo enostavna. Oglejte si odrezek spodaj za spreminjanje slik sivine;

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

... in to je za sepia ala Instagram.

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

Oba sepia in sivine vrednosti so navedene v odstotkih 100% je najvišja in se uporablja 0% bo ohranil nespremenjeno sliko, toda če vrednost ni izrecno navedena 100% bo privzeta.

Možna je tudi osvetlitev slike in to lahko storimo z uporabo svetlost funkcijo, kot sledi;

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

Učinek svetlosti deluje kot kontrast in sepija zgoraj, kjer je vrednost 0% bo ohranil podobo, kot je in jo uporablja 100% bo popolnoma osvetlila sliko, ki bo morda prikazala samo prazno belo stran namesto slike.

Učinek svetlosti tudi omogoča negativne vrednosti, v kateri bo potemni sliko.

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

… In na ta način lahko prilagodimo kontrast slike.

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

Obstaja tudi majhna razlika glede tega, kako dobro deluje tudi, kot lahko vidite v zgornjem, nastavimo kontrast () jo 200%, to je zato, ker je vrednost 100% je izhodiščna točka, kjer ostane slika nespremenjena. Ko je vrednost pod 100%, recimo 50%, slika bo postala manj kontrastna.

Poleg tega lahko učinek kombiniramo tudi v enem deklaracijskem bloku, kot je na primer v spodnjem primeru. Vključimo sliko v sivine in povečanje kontrast hkrati za 50%.

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

Z združitvijo filtra s prehodom CSS3 lahko naredimo elegantno hover učinka.

 img: hover -webkit-filter: sivine (0%);  img: hover -webkit-filter: sepia (0%);  img: hover -webkit-filter: svetlost (0%);  img: hover -webkit-filter: kontrast (100%);  

Nazadnje, še en učinek lahko poskusimo; Gaussova zameglitev, ki bo zameglila ciljni element.

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

Tako kot v Photoshopu je vrednost zamegljenosti navedena v polmeru slikovnih pik in če vrednost ni izrecno navedena, se 0 upošteva kot privzeta, slika pa ostane, kot je.

Končna misel

V specifikaciji je dejansko veliko več učinkov. kot naprimer vrtenje hue, invert in nasičena, vendar mislim, da so manj uporabne v resničnih spletnih primerih. Zato je bila razprava omejena na samo štiri učinke.

In kljub temu, da se razprava uporablja za slike v tej vadnici, se lahko lastnost dejansko uporabi tudi za kateri koli element v DOM-u.

Končno si lahko ogledate predstavitev v živo iz teh povezav spodaj. Upoštevajte, da je filter trenutno podprt samo za Chrome 19 in zgoraj.

• Demo
• Prenesi vir