Nyhetsbrev

Få artiklar, råd och tips om:

Du kan läsa mer om vår policy och vår hantering av persondata här.

CSS Blend Modes

Uppdatera enklare med
CSS Blend Modes

av Frida Nyvall

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).

Tags

Fler inlägg

EAA get ready for the new law

Förbered dig på European Accessibility Act, EAA

Web design trends 2024

Webbdesign trender 2024

Baseline logo on old computer

Värt att veta om Baseline