En av de mest ovärderliga funktionerna i Photoshop - förmodligen är funktionen som driver den framför konkurrensen - blandningslägen. Blandningslägen tar två pixlar som läggs ovanpå varandra och kombinerar dem på olika sätt, till exempel gör det mörkare färgblandningsläget helt enkelt den mörkare av de två pixlarna. När det expanderas över en hel bild kan blandningslägen ge några fantastiska effekter.
Även om Adobes Photoshop inte uppfann blandningslägen är implementeringen säkerligen den mest emulerade. Men nu behöver du inte Photoshop för att utforma din bildspråk på det här sättet, för att vi kan göra allt, dynamiskt, med CSS3.
Som det står, webbläsarsupport för CSS 'egenskap för bakgrunds-blandningsläge förbättras. Tidigare versioner av webbläsare krävde leverantörs prefix och eller aktivering av experimentella funktioner, men caniuse.com rapporterar stöd i nuvarande versioner av Chrome, Firefox och Opera, med Safari följer snart.
Det finns inget tecken på IE-stöd än, men eftersom blandningslägen är en progressiv förbättring kan vi börja överväga att använda dem nu.
Det finns ett antal blandningsmodusalternativ i CSS3-kandidatrekommendationerna, men det mest användbara för våra ändamål är bakgrundsmixningsläge . Med den här egenskapen kan vi blanda två bilder, eller en bild och en bakgrundsfärg.
Här är koden vi behöver:
Och här är vår grundläggande CSS:
.blend{width:782px;height:540px;background:#3db6b8 url("lighthouse.jpg") no-repeat center center;}Vi är nu redo att lägga till blandningslägena.
För att göra detta ska vi lägga till en annan klass i vår div, till exempel "multiplicera":
Och då skapar vi en andra stilregel:
.blend.multiply{background-blend-mode: multiply;}Om du vill titta på koden du kan ladda ner källfilerna här.
Multiplicera , som namnet antyder, multiplicerar baspunkten med blandningsfärgen, vilket resulterar i en mörkare färg. Multiplicera svarta resultat i svart och multiplicera vit lämnar bilden oförändrad.
background-blend-mode: multiply;Överlägg är ett komplext blandningsläge. Multiplikationen beror på basfärgen: ljusa färger blir ljusare, mörka färger blir mörkare.
background-blend-mode: overlay;Den polära motsatsen till mörkare , ljusare belyser en bild genom att jämföra de två överlappande pixlarna och välja de två ljusare.
background-blend-mode: lighten;Färgbränna är det polära motsatsen till färgdodge , det mörker basfärgen vilket resulterar i en ökning av kontrast.
background-blend-mode: color-burn;Mjukt ljus liknar starkt ljus , men i stället för Multiplicera eller screena färgerna, använder mjukt ljus Dodge och bränner för en subtilare effekt.
background-blend-mode: soft-light;Uteslutning liknar skillnad , men det ger mindre kontrast, vilket är lite mer användbar.
background-blend-mode: exclusion;Mättnad , som nyans , sammanfogar två av värdena på basfärgen med en egenskap av blandfärgen, i detta fall mättnaden.
background-blend-mode: saturation;Ljusstyrka är motsatsen till färg , det kombinerar färgtonen och mättnaden av basfärgen och luminansen i blandfärgen.
background-blend-mode: luminosity;