Med några nya CSS-egenskaper under de senaste åren kan frontend-utvecklare nu skapa intressanta textbilder mycket enklare. “Knockout”- eller “cutout”-text, där ord klipper en bakgrundsbild, gradient eller video, är möjligt med mycket lite kod.

I den här artikeln utforskar vi fem CSS-tekniker för att maskera och klippa text med hjälp av egenskaperna background-clip och clip-path.

CSS Gradient Text#

Vi börjar med att skapa en CSS-gradienttexteffekt. Den övergripande idén är att ställa in en bakgrundsgradient bakom en text och sedan “klippa” bakgrunden till textens kanter.

Detta kräver faktiskt bara fyra rader CSS för att åstadkomma detta.

Låt oss anta att vi har en h1.

<h1>Gradients</h1>

I CSS lägger vi till en gradientbakgrund:

h1 {background: linear-gradient(30deg, #9ED8DB 40%, #007B82 70%);}

Om du är som jag och aldrig kommer ihåg den exakta syntaxen för CSS-gradienter kan du kolla in det grymma verktyget för gradientgenerering på coolors.co.

Nu lägger vi till egenskapen som gör klippningen: background-clip.

Css-egenskapen background-clip ställer in om ett elements bakgrund ska sträcka sig under dess ram, utfyllnadsruta eller innehållsruta. – MDN Docs

h1 {...background-clip: text;-webkit-background-clip: text;}

Användning av text-värdet med den här egenskapen gör det möjligt för bakgrundsgradienten att blöda igenom och klippa bakgrundens kanter i texten.

Den sista egenskapen vi behöver är en textfärg. Den ska vara inställd på transparent så att bakgrunden är helt synlig. Utan detta kommer du förmodligen bara att se en tunn kontur av gradienten.

h1 {...color: transparent;}

Det -webkit prefixet krävs faktiskt för Chrome och Safari när detta skrivs eftersom text värdet bara har delvis stöd. Att lägga till både egenskaperna med och utan prefix bör ge stöd för de flesta webbläsare förutom Internet Explorer. Om du behöver stöd för IE kan du lägga till en icke-transparent textfärg som fallback och inkludera den före transparent färg.

Kontrollera background-clip-dokumentationen för fullständig information om webbläsarstöd.

CSS Animated Gradient Text#

För nästa effekt ska vi hålla oss till gradienter och använda en animerad gradient som textbakgrund.

<h1>Animated</h1>

Och för CSS:

h1 {background: radial-gradient(circle, #80ffc1 0%, #ff6161 100%); background-clip: text; -webkit-background-clip: text; color: transparent;}

Vi fortsätter att använda background-clip-egenskaperna och ställer in textfärgen till transparent precis som i det föregående exemplet.

Då vi jobbar med animering måste vi definiera den här gången. Animationen ska löpa oändligt och växla från vänster till höger och tillbaka igen.

h1 {...animation: animatedGradient 2s infinite ease; animation-direction: alternate;}

Sist definierar vi animationsnyckelramen, som ökar background-size-värdet för att få den faktiska animationsrörelsen.

@keyframes animatedGradient { from { background-size: 100%; } to { background-size: 250%; }}

CSS Image Background Text#

Det här nästa exemplet kommer återigen att likna de exempel vi just behandlat. Den enda skillnaden är att vi använder en riktig bild istället för en gradient som bakgrund.

<h1>Images</h1>

h1 {background: url('./image.jpg') no-repeat center center; background-clip: text; -webkit-background-clip: text; color: transparent;}

I vårt fall vill vi se till att bakgrundsbilden inte upprepas och att den är vertikalt och horisontellt centrerad.

CSS Video Background Text#

Okej, härnäst ska vi använda video som bakgrund för vår text. Den här effekten är annorlunda eftersom den använder en SVG i stället för en h1.

Först behöver vi en div som innehåller en video-tagg.

<div class="video-container"> <video loop autoPlay muted playsInline> <source src="./video.mp4" type="video/mp4" />... Other <source /> tags here if necessary </video></div>

På video-taggen lägger vi till några egenskaper: loop autoPlay muted playsInline. Så här långt bör detta ge dig en video som loopar på sidan och som spelas upp automatiskt utan ljud.

Nu kommer stilarna:

.video-container { position: relative;}.video-container video {margin: auto; display: block; clip-path: url(#videoText); width: 640px;}.video-container svg { width: 0; height: 0; position: absolute;}

Den viktigaste egenskapen här är clip-path.

CSS-egenskapen clip-path skapar ett beskärningsområde som fastställer vilken del av ett element som ska visas. De delar som ligger inom området visas, medan de som ligger utanför döljs. – MDN Docs

Det här kommer att bli lite mer begripligt när vi har lagt till SVG:n, men vi vill i princip använda SVG-stigen som region för att klippa vår video till, vilket refereras av url(#videoText)-värdet.

Nu behöver vi en SVG. Det finns massor av olika sätt att skapa och exportera dem men jag brukar använda Figma eller Sketch. Allt du egentligen behöver göra är att lägga till lite text i ditt valfria program och exportera det som en SVG.

Den SVG jag använder nedan är ett förenklat exempel. Din kommer att ha de vanliga xmlns, viewBox och path egenskaperna.

När du väl har exporterat en SVG finns det några tillägg att göra. Först måste vi lägga till ett clipPath-element runt sökvägen.

Svg-elementet <clipPath> definierar en klippväg som ska användas av clip-path-egenskapen.En klippväg begränsar det område som färg kan appliceras på. Konceptuellt sett ritas inte delar av ritningen som ligger utanför det område som avgränsas av klippbanan. – MDN Docs

På en övergripande nivå är det inte så annorlunda än background-clip-egenskapen som vi använde i de tidigare exemplen.

<svg> <clipPath clipPathUnits="objectBoundingBox" transform="scale(0.0015625, 0.002777777777778)"><path d="M196.62 ..." /> </clipPath></svg>

clipPath-elementet ska ha ett ID som matchar det som vi lade till i vår CSS: videoText. Det behöver också en clipPathUnits="objectBoundingBox" egenskap och ett clipPathUnits="objectBoundingBox" värde.

Det sista som ska läggas till är några transform värden. Vi behöver dessa eftersom själva SVG:n avsiktligt sätts till en höjd och bredd på 0 med CSS:en som vi lagt till. På grund av detta måste vi skala upp sökvägen igen så att den blir synlig.

För att få fram skalvärdena dividerar du 1 med höjden och bredden. Eftersom texten i mitt exempel har en bredd på 640px och en höjd på 360px :

1 / 640 = 0.0015625

1 / 360 = 0.002777777777778

scale(0.0015625, 0.002777777777778)

Du kan behöva experimentera lite med detta beroende på vilken bredd och höjd du vill ha.

För att slutligen lägga till den färdiga SVG:n i .video-container div.

<div class="video-container"><svg> <clipPath clipPathUnits="objectBoundingBox" transform="scale(0.0015625, 0.002777777777778)"><path d="M196.62 ..." /> </clipPath></svg><video>...</video></div>

CSS Split Color Text#

För vårt sista exempel skapar vi en text med delad färgeffekt. Det finns troligen några olika sätt att göra detta på, men jag lyckades åstadkomma det med följande:

Först behöver vi en h1, förutom att vi den här gången lägger till ett data-attribut till den. Du kommer att se varför om en minut. Vi vill också se till att det finns en div runt h1.

<div class="split-text-container"><h1 data-text="Split Colors">Split Colors</h1></div>

Nu till stilarna.

.split-text-container { position: relative;}h1 { color: #fff;}h1::before { content: attr(data-text);clip-path: polygon(0px 105%, 93% 0%, 100% 100%);margin: 0;color: #ff6161;position: absolute; top: 0; left: 0; right: 0;}

Det finns två viktiga delar här:

1. Användningen av attr() CSS-funktionen. Funktionen hämtar ett attribut från det valda elementet och låter oss använda det värdet i CSS. I vårt fall vill vi ha attributet data-text som vi lagt till så att vi kan använda det i egenskapen content. Detta ger oss två textelement att arbeta med: det ursprungliga h1-elementet och psuedo-elementet.

2. Egenskapen clip-path. I det föregående exemplet använde vi en separat SVG som värde för den här egenskapen. Vi gör något liknande, förutom att vi använder en polygon-form. Det är detta som ger ett intryck av att textfärgen är “uppdelad”. Vi använder formen för den här polygon för att klippa den röda pseudoelementtexten så att den bara är delvis synlig och sedan placera den ovanpå den vita h1-texten med hjälp av absolut positionering.

En sista tilläggsbeställning är att se till att texten fortfarande är valbar.

h1::before {...pointer-events: none; /* Make text selectable */}

Och utan egenskapen pointer-events förhindrar pseudoelementet faktiskt att en del av vår text kan väljas.

Sammanfattning#

Och där har du det: fem olika CSS-utklippnings- och maskeringseffekter att prova i ditt nästa projekt! Exemplen vi tog upp skrapar verkligen bara på ytan av vad du kan göra med dessa egenskaper. Några andra alternativ kan vara att använda texturer, mer genomarbetade SVG:er och olika typer av animationer.