Notera: Denna funktion här kräver aktivering från sidan chrome://flags för detta CSS-tips arbete.
Om du någonsin har använt en grafik- eller fotoredigerare som Photoshop och Pixelmator bör du redan vara bekant med blandningslägen. Blandningslägen är en samling lägen som låter ett objekt blanda med andra föremåloch därför producerar en kontrasterande utgång från mixen. Om det görs på rätt sätt kan blandningslägen ge ett mycket attraktivt resultat, som det här.
Blandningsläge har varit en funktion som bara finns i grafik- och fotoredigerare. Nuförtiden kan du hitta det i CSS-sfären. Låt oss ta en titt på hur det fungerar.
Startande
Det är värt att notera att CSS3-blandningsläget är en experimentell funktion. Firefox och Chrome är de enda webbläsarna som inkluderar denna funktion i skrivande stund.
Notera: I Chrome, innan du kan rendera CSS3-blandningsläge, måste du aktivera Funktioner i webbplattformen från sidan chrome://flags.
Bakgrundsblandning och blandningsläge
Det finns två nyligen introducerade CSS-egenskaper när det gäller blandningsläge: mix-blend-mode och background-blend-mode.
Mix-mix-läget definierar hur innehållet i ett element kombineras med annat innehåll nedan. Medan egenskapen background-blend-mode, som namnet antyder, adresserar bakgrundsfärg, bakgrundsbild och bakgrundsgradienter.
Precis som i Photoshop kan vi använda följande blandningslägen på dessa CSS-egenskaper: normal, multiplicera, skärm, överlägg, mörkare, ljusare, färg undvika, färgbränning, hårt ljus, mjukt ljus, skillnad, bortfall. , nyans, mättnad, färg och ljusstyrka.
Blandningslägesalternativ i Photoshops lagerpanel.
Använder CSS3 blandningsläge
Googles logotyp är färgstark och har fått många former för Google Doodle-projektet. I det här inlägget kommer vi att utföra Blend-effekten på Googles logotyp för att illustrera hur den här nya CSS3-funktionen fungerar.
Låt oss först ställa in markeringen: vi lindar varje bokstav med ett span-element så att vi kan ange olika färger samt stilregler för bokstaven.
<h1> <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span> </h1>
Därefter lade vi till Googles varumärkesfärger, härledda från BrandColors. Här väljer vi elementet med hjälp av nth-child selector, vilket gör att vi kan tillämpa stilarna utan att behöva lägga till ytterligare HTML-klasser till vart och ett av span-elementen som omsluter bokstäverna.
.demo-wrapper .title {
letter-spacing: -25px;
}
span:first-child {
color: #4285f4;
position: relative;
z-index: 100;
}
span:nth-child(2) {
color: #db4437;
}
span:nth-child(3) {
color: #f4b400;
}
span:nth-child(4) {
color: #4285f4;
position: relative;
z-index: 100;
}
span:nth-child(5) {
color: #0f9d58;
}
span:nth-child(6) {
color: #db4437;
}
I det här skedet är det så här logotypen ser ut. Logotypen ser nu tätare ut eftersom vi minskade det vita utrymmet mellan bokstäverna till -25px via tillagd kod.
Nu tillämpar vi Fusion-läget.
span {
mix-blend-mode: multiply;
}
De ursprungliga färgerna på logotypen samt färgerna på de korsande bokstäverna är mer slående.
Vi har applicerat logotypen med CSS3 Opacity och Blending Mode. Resultatet är som väntat distinkt; Färgerna på Google-logotypen med applicerad opacitet ser föråldrade och bleka ut. Se en demo av deras jämförelse i aktion nedan.
