Pildi reguleerimine CSS-filtriefektidega

Pildi reguleerimine Heledus ja Kontrast, või pildi muutmine Halltoonid või Sephia on tavaline funktsioon, mida võib pildi redigeerimise rakenduses leida, näiteks Photoshop. Aga nüüd on võimalik lisada samu efekte veebipiltidele CSS abil.

See võime tuleneb filtriefektidest, mis tegelikult on tööprojekti etapis. Webkit-brauser näib siiski olevat selle funktsiooni elluviimise samm.

Niisiis, proovime seda proovida ja me kasutame seda kujutist Mehdi Khilt, et näidata mõju.

Efektid

Efektide rakendamine on väga lihtne. Vaadake pilti allpool, piltide muutmiseks halltoonid;

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

… Ja see on seepia ala Instagram.

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

Mõlemad seepia ja halltoonid väärtused on esitatud protsentides 100% on maksimaalne ja rakendatav 0% säilitab pildi vahetamise, kuid kui väärtust ei ole otseselt täpsustatud 100% võetakse vaikimisi.

Võimalik on ka pildi heledus, ja me saame seda teha kasutades heledus funktsioon;

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

Heleduse efekt toimib nagu kontrasti ja seepiaefekt, mis ületab väärtuse 0% hoiab pilti nii, nagu see on, ja rakendab 100% ilmutab pilti täielikult, mis võib kujutise asemel kuvada ainult tühja valge lehe.

Heleduse efekt ka võimaldab negatiivseid väärtusi, kus ta seda teeb tumedamaks.

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

… Ja me saame sellisel viisil pilti kontrastsust reguleerida.

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

Vähe on see, kuidas väärtus toimib hästi, nagu näete eespool, me seadistame kontrasti () kõrval 200%, selle põhjuseks on selle väärtus 100% on alguspunkt, kus pilt jääb muutumatuks. Kui väärtus on allpool 100%, Oletame, et 50%, pilt muutub vähem kontrastseks.

Lisaks võime kombineerida efekti ühes deklaratsiooniplokis, nagu allpool toodud näites. Me muudame pildi halltoonid ja suurendage kontrasti 50% võrra.

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

Filtri kombineerimisel CSS3 üleminekuga saame teha graatsilise hõljuma mõju.

 img: hover -webkit-filter: halltoon (0%);  img: hover -webkit-filter: seepia (0%);  img: hover -webkit-filter: heledus (0%);  img: hover -webkit-filter: kontrastsus (100%);  

Lõpuks on veel üks mõju, mida me püüame; the Gaussi hägusus, mis hägustab sihtelementi.

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

Nagu Photoshopis, on hägususe väärtus märgitud piksliradios ja kui väärtust ei ole selgesõnaliselt märgitud, võetakse 0 vaikeväärtuseks ja pilt jäetakse nii, nagu see on.

Lõplik mõte

Spetsiifis on tegelikult palju rohkem efekte. nagu näiteks hue-rotate, inverts ja küllastunud, kuid ma arvan, et neid rakendatakse reaalsetes veebijuhtumites vähem. Seega piirdus arutelu vaid nelja mõjuga.

Ja hoolimata arutelust, mida rakendatakse selles juhendis olevate piltide suhtes, võib vara tegelikult rakendada ka DOMi mis tahes elemendile.

Lõpuks saate vaadata allolevatest linkidest otseülekannet. Pange tähele, et filtrit toetatakse praegu ainult Chrome 19 ja üle selle.

• Demo
• Allalaadimise allikas