Kuvan säätö CSS-suodatintehosteiden avulla

Kuvan säätäminen Kirkkaus ja Kontrasti, tai kääntämällä kuva harmaasävy tai sephia on yleinen ominaisuus, jota voit löytää kuvankäsittelyohjelmassa, kuten photoshop. Mutta nyt on mahdollista lisätä samat vaikutukset web-kuviin CSS: n avulla.

Tämä ominaisuus tulee suodatustehos- teista, jotka ovat vielä työluonnoksen vaiheessa. Webkit-selain näyttää kuitenkin olevan askel kohti tätä ominaisuutta.

Joten, anna sen kokeilla ja käytämme tätä kuvaa Mehdi Kh: stä vaikutusten osoittamiseksi.

Efektit

Vaikutusten soveltaminen on erittäin helppoa. Tutustu alla olevaan katkelman kuvien kääntämiseen harmaasävy;

 img -webkit-filter: harmaasävy (100%);  

… Ja tämä on seepia ala Instagram.

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

Molemmat seepia ja harmaasävy arvot ilmoitetaan prosentteina 100% on suurin ja sovellus 0% säilyttää kuvan vaihtamisen, mutta kun arvoa ei nimenomaisesti määritellä 100% oletuksena.

Kuvan kirkastaminen on myös mahdollista, ja voimme tehdä sen käyttämällä kirkkaus toiminto;

 img -webkit-suodatin: kirkkaus (50%);  

Kirkkausvaikutus toimii kuten kontrasti ja seepia-vaikutus, jonka yläpuolella arvo on 0% pitää kuvan sellaisena kuin se on ja soveltaa 100% kirkastaa kuvaa täysin, mikä saattaa näyttää vain tyhjän valkoisen sivun kuvan sijasta.

Kirkkaus vaikuttaa myös mahdollistaa negatiiviset arvot, jossa se tulee tummentaa kuvaa.

 img -webkit-suodatin: kirkkaus (-50%);  

… Ja voimme säätää kuvan kontrastia tällä tavalla.

 img -webkit-suodatin: kontrasti (200%);  

On vähän eroa siitä, miten arvo toimii, kuten edellä näet, asetamme kontrasti() mennessä 200%, tämä johtuu siitä, että arvo on 100% on lähtökohta, jossa kuva pysyy muuttumattomana. Kun arvo on alle 100%, sanotaan 50%, kuva muuttuu vähemmän kontrastiseksi.

Lisäksi voimme myös yhdistää vaikutuksen yhteen ilmoituslohkoon, kuten alla olevassa esimerkissä. Käännämme kuvan harmaasävy ja lisää kontrasti 50 prosenttia samanaikaisesti.

 img -webkit-filter: harmaasävy (100%) kontrasti (150%);  

Yhdistämällä suodatin CSS3-siirtymällä voimme tehdä sulavan häilyä vaikutus.

 img: hover -webkit-filter: harmaasävy (0%);  img: hover -webkit-suodatin: seepia (0%);  img: hover -webkit-suodatin: kirkkaus (0%);  img: hover -webkit-suodatin: kontrasti (100%);  

Lopuksi on vielä yksi vaikutus, jota voimme yrittää; Gaussin hämärtyminen, joka hämärtää kohdistettua elementtiä.

 img: hover -webkit-suodatin: hämärtyminen (5px);  

Kuten Photoshopissa, hämärtymisarvo ilmoitetaan pikseliradiossa ja jos arvoa ei ole nimenomaisesti ilmoitettu, 0 otetaan oletuksena ja kuva jätetään sellaisenaan.

Lopullinen ajatus

On todella paljon enemmän vaikutuksia spec. kuten Hue-kiertää, inverttisokeri ja kyllästää, mutta mielestäni niitä käytetään vähemmän todellisissa Web-tapauksissa. Näin ollen keskustelu rajoittui vain neljään vaikutukseen.

Ja vaikka opetusohjelmassa käytetyistä kuvista keskusteltiin, omaisuutta voidaan myös soveltaa kaikkiin DOM-elementteihin.

Lopuksi voit katsella live-demoa seuraavista linkeistä. Huomaa, että suodatinta tuetaan tällä hetkellä vain Chrome 19 ja yli.

• esittely
• Lataa lähde