Afbeeldingen bewerken in CSS mengmodi

In de vorige zelfstudie van deze serie hebben we besproken hoe CSS-filters kunnen worden gebruikt om afbeeldingen te bewerken. Hoewel filters geweldige resultaten kunnen opleveren, zijn ze beperkt tot slechts één laag.

Laten we zeggen dat u een afbeelding hebt en deze met een rode kleur wilt bedekken. Dat kun je niet doen met filters. Mengmodi zijn echter perfect voor deze taak. Ze zijn eigenlijk bedoeld om de voorgrond- en achtergrondkleurwaarden te nemen, enkele berekeningen uit te voeren en vervolgens een laatste kleur terug te geven. De uiteindelijke afbeelding die u krijgt, is het resultaat van al dergelijke berekeningen over elke overlappende pixel.

Met de mengmodi kunt u niet alleen afbeeldingen en kleuren mengen, maar ook tekst en afbeeldingen. In deze zelfstudie laat ik zien hoe je mengmodi gebruikt om afbeeldingen te bewerken en coole effecten te maken.

Beschikbare mengmodi

• normaal: In deze modus is de uiteindelijke kleur de bovenste kleur. De waarde van de onderste kleur heeft geen effect op het eindresultaat.
• Vermenigvuldigen: In deze modus worden de bovenste en onderste kleuren vermenigvuldigd om de uiteindelijke kleur te krijgen. De resulterende kleur zal altijd minstens zo donker zijn als elk van de bestanddelen. Dit betekent dat met een zwarte laag het uiteindelijke resultaat altijd zwart zal zijn. Het gebruik van een witte laag heeft geen enkel effect op het uiteindelijke resultaat.
• Scherm: In deze modus wordt de uiteindelijke kleur verkregen door de bovenste en onderste kleuren om te keren, te vermenigvuldigen en vervolgens het resultaat opnieuw om te keren. De uiteindelijke kleur zal altijd zo licht zijn als de bovenste of onderste kleur. Dit houdt in dat het gebruik van een witte laag alles wit maakt en dat een zwarte laag geen invloed heeft op het eindresultaat.
• overlay: In deze modus wordt de uiteindelijke kleur verkregen door de originele kleuren te vermenigvuldigen of te screenen op basis van de onderste kleur. Als de onderste kleur donkerder is, worden de originele kleuren vermenigvuldigd en als deze lichter is, worden ze gescreend. De hooglichten en schaduwen van de onderste kleur blijven behouden in deze modus.
• donkerder: Deze is vrij eenvoudig. De laatste kleur in deze modus is de donkerdere kleur tussen de bovenste en onderste lagen.
• Verlichten: Dit is het omgekeerde van verdonkeren en de uiteindelijke kleur is daarom de lichtere kleur tussen de bovenste en onderste lagen.
• Kleur-dodge: In deze modus wordt de onderste kleur gedeeld door de inverse van de bovenste kleur om de uiteindelijke waarde te krijgen. In deze modus zie je geen veranderingen met een zwarte achtergrond. Als de bovenste kleur de inverse is van de onderste kleur, is de uiteindelijke kleur een volledig verlichte versie van de bovenste kleur.
• Kleur-burn: De uiteindelijke kleur in deze modus wordt geproduceerd door de inverse van de onderste kleur te delen door de hoogste kleurwaarde en de resulterende waarde om te keren. Als de bovenste kleur wit is, ziet u geen wijzigingen. Een bovenste kleur die de inverse van de onderste kleur is, resulteert in een volledig zwart beeld.
• Hard licht: De modus Hard licht is het omgekeerde van de overlaymodus. In dit geval, als de bovenste kleur donkerder is, worden de originele kleuren vermenigvuldigd en als deze lichter is, worden ze gescreend. Het is in feite overlay-modus waarbij de lagen worden verwisseld.
• Soft-light: Deze modus is net als hard licht, maar levert zachtere eindresultaten op.
• Verschil: In deze modus wordt de waarde van de donkere kleur van de lichtere kleur afgetrokken om de uiteindelijke waarde te krijgen. Dit houdt in dat de kleur zwart geen effect heeft, terwijl wit de kleur van de andere laag zal omkeren.
• Uitsluiting: Deze mengmodus lijkt op verschil, maar het eindresultaat heeft een lager contrast.
• Tint: Deze overvloeimodus gebruikt de tint van de bovenste kleur en de verzadiging en lichtkracht van de onderste kleur om de uiteindelijke kleur te creëren.
• Verzadiging: In deze modus heeft de uiteindelijke kleur de verzadiging van de bovenste kleur en de tint en lichtkracht van de onderste kleur.
• Kleur: Deze mengmodus produceert een uiteindelijke kleur met de tint en verzadiging van de bovenste kleur en de helderheid van de onderste kleur. Deze modus behoudt de grijze niveaus van de onderste kleur en kan worden gebruikt om gekleurde afbeeldingen te kleuren.
• Helderheid: De uiteindelijke kleur in deze modus heeft de helderheid van de bovenste kleur, terwijl de tint- en verzadigingswaarden uit de onderste kleur komen. Het is net als de kleurenmodus maar met de lagen verwisseld.

Bovendien zijn er twee manieren om overvloeimodi te gebruiken. U kunt de mix-blend-modus, die bepaalt hoe de inhoud van een element combineert met de inhoud van het onderliggende element en met de achtergrond van het element. De background-blend-mode, aan de andere kant, bepaalt hoe de achtergrondafbeeldingen van een element met elkaar versmelten en met de achtergrondkleur van het element.

Je kunt met deze demo spelen om te zien hoe verschillende afbeeldingen en kleuren samenwerken op basis van de toegepaste overvloeimodi. Ik heb ook een afbeelding hieronder toegevoegd die het mengen van een gelige kleur met de bronafbeelding laat zien.

Onregelmatige randen maken

Hoewel afbeeldingen over het algemeen meestal rechthoekig zijn, kunnen afbeeldingen met onregelmatige grenzen ze visueel aantrekkelijker maken en een geheel andere betekenis geven. Beschouw dit beeld van een Amerikaanse zeearend vermengd met de kaart van de Verenigde Staten. Het duidt de Amerikaanse waarden aan die worden vertegenwoordigd door de Amerikaanse zeearend. Je kunt ook een aantal andere afbeeldingen op dezelfde manier combineren.

Hier heb ik twee afbeeldingen zo gecombineerd dat het eindresultaat de vorm heeft van de eerste afbeelding en de kleuren van de tweede afbeelding. Welke blend-modus (len) u denkt dat dit effect kan bereiken? 

Een hint hier is dat de kaart helemaal zwart en wit is. Dus, welke blend-modus we ook gebruiken, moet alle gedeelten over het witte gedeelte verbergen en het hele gedeelte over het zwarte gedeelte weergeven. De lichtere blend-modus doet dit werk perfect. Omdat de kleur wit lichter is in vergelijking met de kleuren in de adelaar, verbergt hij de adelaar wanneer hij verder reikt dan de kaart van de Verenigde Staten. 

Probeer de andere overvloeimodus die dit effect als oefening kan bereiken, te raden. Je kunt verschillende mengmodi uitproberen in deze adelaarsdemo om te zien of je de mengmodus goed hebt geraden. 

Het mengen van kleurrijke verlopen

Geloof het of niet, de kleurrijke afbeelding hieronder is het resultaat van zorgvuldig gekozen gradiënten en overvloeimodi. U kunt met de muis over de afbeelding bewegen om de originele versie te bekijken.

Als u dit effect opnieuw wilt maken, moet u beginnen met een afbeelding met een donkere achtergrond voor de beste resultaten. Kies vervolgens de kleuren die u wilt laten overvloeien en maak een lineair verloop met al die kleuren. U kunt eventueel meer hellingen toevoegen vanuit verschillende hoeken. Stel uiteindelijk de eerste in background-blend-mode naar helderheid. Je uiteindelijke CSS zou er ongeveer zo uit moeten zien:

div background: url ('image-url'), lineair verloop (rood, oranje, geel, groen, blauw, indigo, violet), lineair verloop (naar rechts, rood, oranje, geel, groen, blauw, indigo , paars); achtergrond-blend-modus: lichtkracht, overlay; // Meer CSS-regels

Je moet experimenteren met verschillende overvloeimodi en afbeeldingen in de originele demo om de beste combinatie van overvloeimodi voor verschillende soorten afbeeldingen te vinden.

Tekst samenvoegen

Mengmodi zijn niet beperkt tot afbeeldingen. U kunt ook overvloeimodi toepassen op een stuk tekst. In de onderstaande afbeelding heb ik een overvloeimodus op alle personages toegepast, evenals de achtergrondafbeelding.

De personages gebruiken de mix-blend-modus eigendom, en het lichaam gebruikt background-blend-mode. Hier is de relevante CSS:

body background: # D63 url ('image-url') geen herhaling; achtergrond-blend-modus: vermenigvuldigen; achtergrondformaat: omslag;  h1 span mix-blend-mode: hard-light;  

Net als bij eerdere demo's, zou ik willen voorstellen dat je ook in deze demo met verschillende overvloeimodi experimenteert.

Laatste gedachten

Met een beetje fantasie zijn de mogelijkheden met mengmodi eindeloos. Ik hoop dat deze tutorial je iets nuttigs heeft geleerd over overvloeimodi en beeldbewerking. Blijf oefenen en je zult heel goed worden in het gebruik van verschillende mengmodi.

Als je iets interessants hebt gemaakt met de overvloeimodi, deel je werk dan in de onderstaande opmerkingen.