Vaizdo reguliavimas naudojant CSS filtrų efektus

Vaizdo reguliavimas Ryškumas ir Kontrastas, arba paversti vaizdą į Pilkos spalvos arba Sefija yra bendra funkcija, kurią galite rasti vaizdo redagavimo programoje, kaip „Photoshop“. Tačiau dabar galima įtraukti tuos pačius efektus žiniatinklio vaizdams naudojant CSS.

Ši galimybė gaunama iš filtro efektų, kurie iš tikrųjų dar yra darbo projekto etape. Tačiau „Webkit“ naršyklė atrodo kaip žingsnis į priekį įgyvendinant šią funkciją.

Taigi, leiskite jam pabandyti ir mes naudosime šį vaizdą iš Mehdi Kh, kad parodytume poveikį.

Efektai

Poveikio taikymas yra labai paprastas. Pažvelkite į toliau pateiktą fragmentą, kad paverstumėte vaizdus pilkos spalvos;

 img -webkit-filter: pilkos spalvos (100%);  

… Ir tai yra sepija ala Instagram.

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

Tiek sepija ir pilkos spalvos vertės nurodomos procentais 100% yra didžiausias ir taikomas 0% išsaugos vaizdo keitimą, bet kai vertė nėra aiškiai nurodyta 100% bus laikomas numatytuoju.

Galima ir atvaizdo ryškinimas, ir mes galime tai padaryti naudodami ryškumas funkcija;

 img -webkit-filter: ryškumas (50%);  

Ryškumo efektas veikia kaip kontrastas ir sepijos efektas, virš kurio yra 0% išlaikys vaizdą, kaip jis yra, ir taikys 100% visiškai atgaivins vaizdą, kuris galbūt rodytų tik tuščią baltą puslapį, o ne vaizdą.

Ryškumo efektas taip pat leidžia neigiamas vertes, kurioje ji bus tamsinti vaizdą.

 img -webkit-filter: ryškumas (-50%);  

… Ir tokiu būdu galime koreguoti vaizdo kontrastą.

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

Yra mažai skirtumo, kaip vertė veikia taip pat, kaip matote pirmiau, mes nustatome kontrastas () iki 200%, tai yra todėl, kad 100% yra pradinis taškas, kur vaizdas išliks nepakitęs. Kai vertė yra žemiau 100%, Tarkime, 50%, vaizdas taps mažiau kontrastingas.

Be to, galime suderinti efektą viename deklaracijos bloke, pvz., Toliau pateiktame pavyzdyje. Vaizdą įjungiame pilkos spalvos ir padidinti kontrastas 50% tuo pačiu metu.

 img -webkit-filter: pilkos spalvos (100%) kontrastas (150%);  

Sujungus filtrą su CSS3 perėjimu, galime padaryti grakštus pakimba poveikį.

 img: hover -webkit-filter: pilkos spalvos (0%);  img: hover -webkit-filter: sepija (0%);  img: hover -webkit-filter: ryškumas (0%);  img: hover -webkit-filter: kontrastas (100%);  

Galiausiai galime pabandyti dar vieną efektą; Gauso suliejimo, kuris susilieja tikslinį elementą.

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

Kaip ir „Photoshop“, neryškumo reikšmė nurodoma pikselių spinduliu ir, jei vertė nėra aiškiai nurodyta, 0 bus laikomas numatytuoju ir vaizdas paliekamas taip, kaip jis yra.

Galutinė mintis

Specifikacijoje yra daug daugiau efektų. toks kaip atspalvis sukasi, invertuoti ir sočiųjų, bet manau, kad jie yra mažiau taikomi tikruose žiniatinklio atvejais. Taigi diskusija apsiribojo tik keturiais poveikiais.

Ir, nepaisant diskusijų, kurios buvo taikomos vaizdams šioje pamokoje, nuosavybė taip pat gali būti taikoma bet kuriam DOM elementui.

Galiausiai galite peržiūrėti tiesioginę demonstraciją iš toliau pateiktų nuorodų. Atkreipkite dėmesį, kad filtras šiuo metu yra palaikomas tik „Chrome“ 19 ir daugiau.

• Demo
• Atsisiųsti šaltinį