CSS Blend Modes
19 May 2020
Uppdatera enklare med
CSS Blend Modes
Att kunna få bakgrundsbilder och HTML element att blanda sig med varandra är inte något nytt. När tekniken numer går att använda i över 90% av världens alla webbläsare finns det större möjligheter att använda den på ett tillgängligt sätt.
Vad är Blend Modes?
Blend Modes i CSS används för att blanda två eller flera lager genom att använda matematiska formler och räkna ut vilken färg varje pixel ska ha. Det går att använda Blend Modes på både bilder, gradienter och helfärgade element. De som sedan tidigare är bekanta med grafiska program som Photoshop kan känna igen några av de Blend Modes som finns tillgängliga.
Varför använda Blend Modes?
Blend Modes kan användas för att skapa visuella utsmyckningar endast med hjälp av HTML element. Det är därför väldigt positivt för SEO och performance (hur snabbt sidan laddas). Det gör det också enklare att skapa visuellt enhetliga bilder och texter, eftersom det inte kräver att administratören har kunskaper i bildbehandlingsprogram.
Tack vare Blend Modes kan webbadministratörer skapa visuella effekter med dynamiskt innehåll, utan att behöva förlita sig på eller skapa specifikt bildmaterial. Att skapa bilder tar också tid och kräver kunskaper i bildbehandlingsprogram (som Photoshop). Det blir helt enkelt enklare, snabbare och billigare när fler anställda kan hjälpa till att editera webbsidorna.
Eftersom det går att undvika att lägga in text som en del av bilden, förbättras också SEO. Även sidans laddningstid eller performance förbättras eftersom bilder alltid är tunga resurser att ladda in jämfört med ett par rader kod.
Exempel
Antalet effekter som går att skapa med hjälp av alla olika inställningar för Blend Modes är överväldigande stort. Nedan lyfter vi fram några typiska, populära och vanligt förekommande exempel på användningsområden:
Färga en bild
Färga en bild med en valfri färg. Att kunna göra detta automatiskt sparar tid på bildredigering. Även anställda utan kunskaper i bildredigering kan uppdatera bilderna.
See the Pen CSS Blend Mode Example: Tinting an Image by Frida Nyvall (@fridanyvall) on CodePen.
Blanda flera bilder
Blanda bilder så att de smälter samman på ett konstfullt sätt.
See the Pen CSS Blend Mode Example: Blending Images Together by Frida Nyvall (@fridanyvall) on CodePen.
Urklippt och överlappande text
Användbart för att förbättra SEO eftersom texten blir indexerbar av sökmotorer när den inte ingår i bilden. Förbättrar sidans laddningstid eftersom bilden utan text blir mindre. Hjälper också till att minska tiden som läggs på bildredigering.
See the Pen CSS Blend Mode Example: Knockout Text by Frida Nyvall (@fridanyvall) on CodePen.
See the Pen CSS Blend Mode Example: Overlapping Text by Frida Nyvall (@fridanyvall) on CodePen.
See the Pen CSS Blend Mode Example: Overlapping Text and Blending Images by Frida Nyvall (@fridanyvall) on CodePen.
See the Pen Playing with Mix-blend-mode by Frida Nyvall (@fridanyvall) on CodePen.
Nyfiken på hur koden bakom blend modes fungerar? Läs bloggposten ”Blend Modes in CSS” från vår techblogg (artikeln är på engelska).