Share
We hebben een complete handleiding samengesteld om u te helpen bij het leren van CSS, of u nu net begint met de basis of als u meer geavanceerde CSS wilt verkennen.
U bent wellicht bekend met "overvloeimodi" als u een Photoshop-gebruiker bent; ze laten je toe om lagen op verschillende manieren te combineren en ze zijn erg leuk om mee te spelen. Overvloeimodi in CSS worden echter niet universeel ondersteund, maar zijn zeker in aantocht.
In deze zelfstudie leren we hoe overvloeimodi werken en de verschillende manieren waarop u overvloeimodi kunt implementeren met behulp van CSS.
Als u nog nooit blending-modi hebt gezien, lijkt de manier waarop ze werken een beetje ongrijpbaar. Laten we het afbreken.
Overvloeimodi zijn al jaren beschikbaar in ontwerpsoftware, maar het concept van overvloeimodi is al veel langer in gebruik, zelfs voordat computers werden uitgevonden.
Het "overvloeiende" deel van overvloeimodi verwijst naar het nemen van twee kleuren en ze op de een of andere manier combineren om een kleur te maken. Nauwkeuriger gezegd, we nemen twee pixelkaarten en mengen ze samen.
Hoe dat vermenging plaatsvindt is het "mode" deel van overvloeimodi. Hoe werken die kleuren samen? Omdat we met de digitale ruimte werken, kunnen we elke wiskundige formule gebruiken en deze toepassen op de twee ingangen om een uitgang af te leiden.
Een onbehandeld beeld van een kwal
Dezelfde kwal met een effen oranje laag (onze "bron") eroverheen
Dit is onze bronlaag met de toegepaste "scherm" overvloeimodusAls je je voelt werkelijk ambitieus, neem een kijkje in het officiële compositiedocument van de W3C FX Task Force waarin de wiskundige implementaties van elk van de verschillende overvloeimodi worden uitgelegd. Het toont een formule die wordt gebruikt om het mengen meer te berekenen.
Cm = B (Cb, Cs)
Accentsconagua
Cm is de resulterende kleur na het mengen. B verwijst naar de mengfunctie. cb variabele is de achtergrondkleur. cs variabele is de bronkleur. Alle kleuren zijn gebaseerd op een schaal van 0-1, die direct is gekoppeld aan een rgb 0-255-waarde.
Er zijn twee categorieën overvloeimodi. De eerste worden als "niet-scheidbaar" beschouwd en de tweede (niet verrassend) worden als "scheidbaar" beschouwd. Of een overvloeimodus als scheidbaar wordt beschouwd, wordt bepaald door het onderliggende algoritme. Als het algoritme elk van de afzonderlijke kleurkanalen (rood, groen en blauw) gelijk behandelt, wordt het als niet-scheidbaar beschouwd. Als het elk van de kleurkanalen afzonderlijk gebruikt, wordt het als scheidbaar beschouwd.
Alle overvloeimodi mogen alleen kleuren retourneren die binnen het bereik van 0 tot 255 liggen. Alles buiten dit bereik in beide richtingen wordt afgekapt tot het bereik. Wanneer u grote gebieden wit of zwart op een gemengd gebied ziet, is dit waarschijnlijk omdat die gebieden worden afgekapt.
CSS-overvloeimodi, waar ondersteund, werken op twee verschillende manieren. Het eerste type mengmodus wordt aangeroepen background-blend-mode. Met deze eigenschap kunt u alle achtergronden in een element met elkaar vermengen.
Als u bijvoorbeeld meerdere achtergrondafbeeldingen hebt gedefinieerd (ondersteund in alle browsers buiten IE8), wordt de eerste achtergrondafbeelding behandeld als de bronlaag en wordt elke afbeelding die daarna wordt toegevoegd behandeld als de achtergrondlaag die eronder ligt.
Als u een achtergrondkleur toevoegt (die als laatste moet worden weergegeven in de lijst), plaatst u een andere laag onderaan. De kleur wordt behandeld als de achtergrondlaag en de afbeeldingen als de bronlagen. Neem de volgende stijlregel, bijvoorbeeld:
div background: url (img / pattern.png), url (img / jellyfish.jpg), # f07e32;
Dat geeft ons:
En we kunnen dan mengmodi toevoegen aan de mix:
div background: url (img / pattern.png), url (img / jellyfish.jpg), # f07e32; achtergrond-blend-modus: scherm;
Hier zijn twee divs die deze stijlen gebruiken, één zonder de overvloeimodus, de tweede met:
Een secundair overvloeimodustype, mix-blend-modus, zorgt ervoor dat onafhankelijke elementen samen kunnen worden gemengd. De specificatie is meer specifiek over de implementatie, maar de vermenging vindt plaats in "stacking-contexten".
Dit is wat er gebeurt als we gebruiken mix-blend-modus, proberen de achtergrondafbeelding en kleur binnen hetzelfde element te laten overvloeien (heel weinig):
.my-overlay-element background-colour: # f07e32; achtergrondafbeelding: url (img / jellyfish.jpg); // Opmerking: deze afbeelding wordt niet gemengd met de achtergrondkleur. mix-blend-modus: kleur-ontwijk;
Hieronder vindt u een interactieve demo voor het verkennen van de effecten van een bepaalde overvloeimodus.
Laten we eens kijken naar de beschikbare overvloeimodi, door de gebruikte formule te bekijken en elke formule toe te passen op de rode cirkel boven onze kwal.
Geen mengmodus toegepastB (Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]
Het scherm is genoemd naar het concept van het tegelijkertijd projecteren van meerdere fotobelichtingen op één scherm. De resulterende kleur is altijd minstens even licht als een van de gemengde lagen.
SchermmengmodusB (Cb, Cs) = min (Cb, Cs)
Selecteert het donkerdere van de twee kleuren.
Donkerdere mengmodusB (Cb, Cs) = max (Cb, Cs)
Selecteert de aansteker van de twee kleuren.
Verlicht de mengmodusif (Cb == 0) B (Cb, Cs) = 0 else if (Cs == 1) B (Cb, Cs) = 1 else B (Cb, Cs) = min (1, Cb / (1 - Cs) )
Kleur dodge verlicht de achtergrondkleur om de bronkleur weer te geven.
Kleur dodge blend-modusif (Cb == 1) B (Cb, Cs) = 1 else if (Cs == 0) B (Cb, Cs) = 0 else B (Cb, Cs) = 1 - min (1, (1 - Cb) / Cs)
Kleurbranding maakt de achtergrondkleur donkerder, waardoor het contrast tussen de bron en de achtergrond toeneemt.
Mengkleurmodus voor kleurenif (Cs <= 0.5) B(Cb, Cs) = Multiply(Cb, 2 x Cs) else B(Cb, Cs) = Screen(Cb, 2 x Cs -1)
Past "vermenigvuldigen" op lichtere kleuren en "scherm" op donkere kleuren toe. In wezen is 'hard licht' het tegenovergestelde van 'overlay', waar we hierna naar zullen kijken.
Mengmodus voor harde kleurenB (Cb, Cs) = HardLight (Cs, Cb)
Past "scherm" toe op lichtere kleuren en "vermenigvuldigt" op donkerdere kleuren; geschreven als hetzelfde als "hard licht", behalve met de argumenten voor de omgekeerde functie.
Overlay blend-modusif (Cs <= 0.5) B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb) else B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb) with if(Cb <= 0.25) D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb else D(Cb) = sqrt(Cb)
Deze mengmodus past een variant van "vermenigvuldigen" toe op donkere waarden en een variant van "scherm" op lichtere waarden (vergelijkbaar met scherm).
In dit algoritme zien we een secundaire functie D dat is ingesteld in de met clausule op basis van de blauwe waarde in de kleur. Het eindresultaat is meestal een veel zachter effect dan "overlay".
Sof-licht-mengmodusB (Cb, Cs) = | Cb - Cs |
Verschil neemt de absolute verschilwaarde tussen de twee kleuren, wat het effect is van een fotonegatief.
Difference blend-modusB (Cb, Cs) = Cb + Cs - 2 x Cb x Cs
De uitzonderingsmodus heeft hetzelfde basiseffect als de "verschil" -modus, behalve dat vergelijkbare kleuren resulteren in een lagere contrastmiddelwaarde (in plaats van een donkerdere waarde).
UitsluitingsmodusDe "niet-scheidbare" overvloeimodi maken gebruik van een paar extra functies, waaronder een ClipColor functie, SetLum functie, en Za functie.
Belangrijke notitie: Geen versie van Safari ondersteunt "tint", "verzadiging", "kleur" of "helderheid" mengmodi met mix-blend-modus of background-blend-mode.
ClipColor (C) l = Lum (C) n = min (Cred, Cgreen, Cblue) x = max (Cred, Cgreen, Cblue) als n < 0.0 Cred = l + (((Cred - l) * l) / (l - n)) Cgreen = l + (((Cgreen - l) * l) / (l - n)) Cblue = l + (((Cblue - l) * l) / (l - n)) if x > 1.0 Cred = l + (((Cred - l) * (1 - l)) / (x - l)) Cgreen = l + (((Cgreen - l) * (1 - l)) / (x - l) ) Cblue = l + (((Cblue - l) * (1 - l)) / (x - l)) return C SetLum (C, l) d = l - Lum (C) Cred = Cred + d Cgreen = Cgreen + d Cblue = Cblue + d return ClipColor (C) Sat (C) = max (Cred, Cgreen, Cblue) - min (Cred, Cgreen, Cblue)
Merk op min, midden, en max utility-functies verwijzen naar de minimum-, midden- en maximumwaarden. (Mid is niet het gemiddelde van de drie waarden.) De waarden cred, Cgreen, en CBlue verwijs naar de rode, groene en blauwe waarden die in kleur aanwezig zijn C.
Met deze definities kunnen we nu kijken naar de niet-scheidbare overvloeimodi.
B (Cb, Cs) = SetLum (SetSat (Cs, Sat (Cb)), Lum (Cb))
Deze modus past de tint van de bronlaag toe op de luminantie en verzadiging van de achtergrondkleur.
Hue-mengmodusB (Cb, Cs) = SetLum (SetSat (Cb, Sat (Cs)), Lum (Cb))
Deze modus doet hetzelfde als de "tint" -modus, maar past in plaats daarvan de verzadiging van de voorgrond toe op de tint en de luminantie van de achtergrond.
KleurverzadigingsmodusB (Cb, Cs) = SetLum (Cs, Lum (Cb))
Past de tint en verzadiging van de voorgrond toe op de luminantie van de achtergrond.
KleurmengmodusB (Cb, Cs) = SetLum (Cb, Lum (Cs))
Deze modus past de helderheid van de bronlaag toe met de tint en verzadiging van de achtergrondlaag.
Luminosity blend-modusMengmodi in CSS bieden nieuwe en opwindende flexibiliteit voor ontwerp en unieke esthetische ervaringen. Als u de wiskundige en de kleurentheorie begrijpt die van toepassing is op elk van de beschikbare overvloeimodi, beschikt u over een meer holistische toolset.
Wat gaat u doen als browsers doorgaan met het toevoegen van ondersteuning voor overvloeimodi?
