En av de mest uvurderlige funksjonene i Photoshop-uten tvil, funksjonen som drev den foran konkurrentene-er blandemodi. Blendmodusene tar to piksler lagt ovenpå hverandre og kombinerer dem på forskjellige måter, for eksempel vil den mørkere fargemix-modusen bare gjøre den mørkere av de to pikslene. Når utvidet over et helt bilde, kan blandingsmodusene gi noen fantastiske effekter.
Selv om Adobe Photoshop ikke oppdaget blandemodi, er implementeringen dessverre den mest emulerte. Men nå trenger du ikke Photoshop til å utforme bildene dine på denne måten, fordi vi kan gjøre alt, dynamisk, med CSS3.
Som det står, nettleserstøtte for CSS ' bakgrunnsblandingsmodus er bedre. Tidligere versjoner av nettlesere krevde leverandørprefikser og eller aktivering av eksperimentelle funksjoner, men caniuse.com rapporterer støtte i dagens versjoner av Chrome, Firefox og Opera, med Safari følger snart.
Det er ikke noe tegn på IE-støtte ennå, men som blandingstilstander er en progressiv forbedring, kan vi begynne å vurdere å bruke dem nå.
Det finnes en rekke blandemodusalternativer i CSS3-kandidat-anbefalingene, men det mest nyttige for vårt formål er bakgrunns-blanding-modus . Denne egenskapen tillater oss å blande to bilder, eller et bilde og en bakgrunnsfarge.
Her er koden vi trenger:
Og her er vår grunnleggende CSS:
.blend{width:782px;height:540px;background:#3db6b8 url("lighthouse.jpg") no-repeat center center;}Vi er nå klare til å legge til blandemodusene.
For å gjøre dette, skal vi legge til en annen klasse i vår div, for eksempel "multiplisere":
Og så vil vi opprette en annen stilregel:
.blend.multiply{background-blend-mode: multiply;}Hvis du vil se koden du kan last ned kildefilene her.
Multipliser , som navnet antyder, multipliserer basepiksel ved hjelp av blendfargen, noe som resulterer i en mørkere farge. Multipliserer svarte resultater i svart, og multipliserer hvitt, etterlater bildet uendret.
background-blend-mode: multiply;Overlegg er en kompleks blandingstilstand. Multiplikasjonen avhenger av basisfargen: Lysfarger blir lettere, mørke farger blir mørkere.
background-blend-mode: overlay;Det polare motsatt av mørkere , lysere lyser et bilde ved å sammenligne de to overlappende piksler og velge lyseren til de to.
background-blend-mode: lighten;Fargeforbrenning er det polære motsatte av fargevennutviklingen , det mørkere basisfargen, noe som resulterer i en økning i kontrast.
background-blend-mode: color-burn;Mykt lys ligner på hardt lys , men i stedet for å multiplisere eller vise farger, bruker mykt lys unnvike og brenne for en subtilere effekt.
background-blend-mode: soft-light;Utelukkelse ligner forskjell , men det gir mindre kontrast, så det er litt mer brukbart.
background-blend-mode: exclusion;Metning , som fargetone , fusjonerer to av verdiene av basisfargen med en egenskap av blandingsfargen, i dette tilfellet metningen.
background-blend-mode: saturation;Lysstyrke er det motsatte av farge , det kombinerer fargetone og metning av basisfargen og luminansen av blandingsfargen.
background-blend-mode: luminosity;