Yksi Photoshopin arvokkaimmista ominaisuuksista - epäilemättä se ominaisuus, joka sai sen eteen kilpailun - on sekoitustiloja. Sekoitusmoodit ottavat kaksi pikseliä, jotka on asetettu päällekkäin ja yhdistetty eri tavoin. Esimerkiksi tummempi väriyhdistelmä tekee yksinkertaisesti kahden pikselin tummemman. Kun koko kuva laajenee, sekoitustilat voivat tuottaa hienoja vaikutuksia.
Vaikka Adoben Photoshop ei keksinyt sekoitusmalleja, sen toteutus on varmasti kaikkein emuloitu. Mutta nyt Photoshopia ei tarvitse kuvata tyylillä tällä tavoin, koska voimme tehdä kaiken dynaamisesti CSS3: n avulla.
Kun se seisoo, selaintuki CSS: n tausta-sekoitusmoodin ominaisuus paranee. Aikaisemmat selainten versiot vaativat toimittajan etuliitteitä ja / tai kokeellisten ominaisuuksien aktivointia, mutta caniuse.com Raportit tukevat nykyisissä Chrome-, Firefox- ja Opera-versioissa, ja Safari seuraa pian.
Ei vieläkään ole merkkejä IE: n tuesta, mutta sekoitusmoodit ovat progressiivista parannusta. Voimme aloittaa niiden käytön nyt.
CSS3-ehdokkuusohjeissa on useita sekoitusvaihtoehtoja, mutta käyttökelpoisimpia tavoitteitamme on taustasekoitus-tila . Tämä ominaisuus mahdollistaa kahden kuvan yhdistämisen tai kuvan ja taustan värin.
Tässä on tarvitsemamme koodi:
Ja tässä on perus CSS:
.blend{width:782px;height:540px;background:#3db6b8 url("lighthouse.jpg") no-repeat center center;}Olemme nyt valmiita lisäämään sekoitustilat.
Tätä varten aiomme lisätä toisen luokan divamme, esimerkiksi "kertoa":
Ja sitten luodaan toinen tyyli-sääntö:
.blend.multiply{background-blend-mode: multiply;}Jos haluat katsoa koodia, voit lataa lähdetiedostot täältä.
Kerro , kuten nimestä kertoo, kertoo peruspikseliä sekoitusväriin, mikä tuottaa tummemman värin. Mustat tulokset tulostetaan mustaksi, ja kerrottu valkoinen jättää kuvan ennallaan.
background-blend-mode: multiply;Peittokuva on monimutkainen sekoitustila. Moninkertaistaminen riippuu perusväristä: vaaleat värit saavat kevyempää, tummat värit tumistuvat.
background-blend-mode: overlay;Polaarinen vastakohta tummennuksen , valaistuksen , valaisee kuvaa vertaamalla kahta päällekkäistä pikseliä ja valitsemalla näiden kahden kevyemmän.
background-blend-mode: lighten;Värin polttaminen on värin väistämisen polaarinen vastakohta, joka värittää pohja värin, mikä lisää kontrastia.
background-blend-mode: color-burn;Pehmeä valo on samanlainen kuin kova valo , mutta sen sijaan, että kerrotaan tai seulotaan värejä, pehmeä valo käyttää väistää ja polttaa hienommaksi.
background-blend-mode: soft-light;Poikkeus on samanlainen kuin ero , mutta se tuottaa vähemmän kontrastia, joten se on hieman käyttökelpoisempi.
background-blend-mode: exclusion;Kylläisyys , kuten sävy , yhdistää kaksi perusvärin arvosta yhdellä ominaisuudella sekoitusväri, tässä tapauksessa kyllästyminen.
background-blend-mode: saturation;Valoisuus on värin vastakohta, se yhdistää perusvärin värin ja kylläisyyden sekä sekoitusvärien luminanssin.
background-blend-mode: luminosity;