En af de mest uvurderlige træk ved Photoshop-sandsynligvis er den funktion, der drev den foran sin konkurrence - blandingsformer. Blendtilstande tager to pixler lagt oven på hinanden og kombinerer dem på forskellige måder, for eksempel vil den mørkere farveblanding simpelthen gøre den mørkere af de to pixels. Når udvidet på tværs af et helt billede, kan blandingsformer frembringe nogle fantastiske effekter.
Selvom Adobes Photoshop ikke opfinde blandingsfunktioner, er implementeringen bestemt den mest emulerede. Men nu behøver du ikke Photoshop til at style dit billed på den måde, fordi vi kan gøre det hele dynamisk med CSS3.
Som det står, browser support for CSS 'egenskab for baggrundsblend-mode forbedres. Tidligere versioner af browsere krævede sælgerpræfikser og eller aktivering af eksperimentelle egenskaber, men caniuse.com rapporterer support i de nuværende versioner af Chrome, Firefox og Opera, med Safari følger snart.
Der er endnu ikke tegn på IE-support, men som blandingstilstande er en progressiv forbedring, kan vi begynde at overveje at bruge dem nu.
Der findes en række blandemodusindstillinger i CSS3-kandidathenstillingerne, men det mest anvendelige til vores formål er baggrunds-blandingstilstand . Denne egenskab tillader os at blande to billeder, eller et billede og en baggrundsfarve.
Her er koden vi har brug for:
Og her er vores grundlæggende CSS:
.blend{width:782px;height:540px;background:#3db6b8 url("lighthouse.jpg") no-repeat center center;}Vi er nu klar til at tilføje blandingsfunktionerne.
For at gøre dette skal vi tilføje en anden klasse til vores div, for eksempel "multiplicere":
Og så opretter vi en anden stilregel:
.blend.multiply{background-blend-mode: multiply;}Hvis du gerne vil kigge på koden, du kan download kildefilerne her.
Multiplicer , som navnet antyder, multiplicerer basepixel med blendfarven, hvilket resulterer i en mørkere farve. Multiplicere sorte resultater i sort og multiplicere hvide efterlader billedet uændret.
background-blend-mode: multiply;Overlay er en kompleks blandingstilstand. Multiplikationen afhænger af basisfarven: Lys farver bliver lysere, mørke farver bliver mørkere.
background-blend-mode: overlay;Det polære modsatte af mørkere , lysere letter et billede ved at sammenligne de to overlappende pixels og vælge de to lysendes lysere.
background-blend-mode: lighten;Farvebrænding er det polære modsatte af farven undvige , det mørkner bundfarven, hvilket resulterer i en stigning i kontrast.
background-blend-mode: color-burn;Blødt lys ligner hårdt lys , men i stedet for at Multiplicere eller screene farverne, bruger blødt lys undvige og brænde for en mere subtil effekt.
background-blend-mode: soft-light;Udelukkelse ligner forskel , men det giver mindre kontrast, så det er lidt mere brugbart.
background-blend-mode: exclusion;Mætning , som farvetone , fusionerer to af værdierne af basisfarven med en egenskab af blandingsfarven, i dette tilfælde mætningen.
background-blend-mode: saturation;Lysstyrke er det modsatte af farve , det kombinerer nuance og mætning af basisfarven og luminansen af blandingens farve.
background-blend-mode: luminosity;