Med tilføjelsen af nogle nye CSS-egenskaber i de sidste par år kan frontend-udviklere nu meget nemmere skabe interessante tekstbilleder. “Knockout”- eller “cutout”-tekst, hvor ord klipper et baggrundsbillede, en gradient eller en video, er muligt med meget lidt kode.

I denne artikel udforsker vi fem CSS-tekstmaskerings- og klippeteknikker ved hjælp af egenskaberne background-clip og clip-path.

CSS Gradient Text#

Lad os starte med at skabe en CSS-gradientteksteffekt. Den overordnede idé er at indstille en baggrundsgradient bag noget tekst og derefter “klippe” baggrunden til tekstens kanter.

Dette kræver faktisk kun fire linjer CSS at udføre.

Lad os antage, at vi har en h1.

<h1>Gradients</h1>

I CSS skal vi tilføje en gradientbaggrund:

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

Hvis du ligesom mig aldrig kan huske den nøjagtige syntaks for CSS-gradienter, kan du tjekke det fantastiske gradientgeneratorværktøj på coolors.co.

Nu skal vi tilføje den egenskab, der udfører klipningen: background-clip.

CSS-egenskaben background-clip angiver, om et elements baggrund strækker sig under dets borderbox, paddingbox eller indholdsbox. – MDN Docs

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

Hvis du bruger værdien text med denne egenskab, kan baggrundsgradienten bløde igennem og klippe baggrundens kanter ud i teksten.

Den sidste egenskab, vi har brug for, er en tekstfarve. Den skal være indstillet til transparent, så baggrunden er helt synlig. Uden dette vil du sandsynligvis kun se en tynd omrids af gradienten.

h1 {...color: transparent;}

Den -webkit præfiks er faktisk påkrævet for Chrome og Safari i skrivende stund, fordi text-værdien kun har delvis understøttelse. Tilføjelse af både egenskaberne med og uden præfiks burde understøtte de fleste browsere bortset fra Internet Explorer. Hvis du skal understøtte IE, kan du tilføje en ikke-transparent tekstfarve som en fallback og inkludere den før transparent farve.

Kontroller background-clip-dokumentationen for at få fuldstændige oplysninger om browserunderstøttelse.

CSS Animated Gradient Text#

For den næste effekt skal vi holde os til gradienter og bruge en animeret gradient som tekstbaggrund.

<h1>Animated</h1>

Og til CSS:

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

Vi fortsætter med at bruge background-clip-egenskaberne og indstiller tekstfarven til transparent ligesom i det foregående eksempel.

Da vi arbejder med animation, skal vi definere det næste. Animationen skal køre uendeligt og veksle fra venstre til højre og tilbage igen.

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

Sidst definerer vi animations keyframe, som øger background-size-værdien for at få den faktiske animationsbevægelse.

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

CSS Image Background Text#

Dette næste eksempel vil igen ligne dem, vi lige har gennemgået. Den eneste forskel er, at vi vil bruge et faktisk billede i stedet for en gradient som baggrund.

<h1>Images</h1>

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

I vores tilfælde vil vi sikre os, at baggrundsbilledet ikke gentager sig og er vertikalt og horisontalt centreret.

CSS Video Background Text#

Okay, nu skal vi bruge video som baggrund for vores tekst. Denne effekt er anderledes, idet den bruger en SVG i stedet for en h1.

Først har vi brug for en div, der indeholder et videotag.

<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å videotaggen tilføjer vi nogle egenskaber: loop autoPlay muted playsInline. Indtil videre skulle det give dig en video, der looper på siden, og som afspilles automatisk uden lyd.

Nu kommer stilarterne:

.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 vigtigste egenskab her er clip-path.

CSS-egenskaben clip-path skaber et udklipsområde, der angiver, hvilken del af et element der skal vises. De dele, der er inden for området, vises, mens de dele, der er uden for, er skjulte. – MDN Docs

Dette vil give lidt mere mening, når vi har tilføjet SVG’en, men vi ønsker grundlæggende at bruge SVG-stien som regionen til at klippe vores video til, som der henvises til med url(#videoText)-værdien.

Nu skal vi bruge en SVG. Der er tonsvis af forskellige måder at oprette og eksportere dem på, men jeg bruger normalt Figma eller Sketch. Det eneste, du egentlig skal gøre, er at tilføje noget tekst i dit foretrukne program og eksportere det som en SVG.

Den SVG, jeg bruger nedenfor, er et forenklet eksempel. Din vil have de sædvanlige xmlns, viewBox og path egenskaber.

Når du har eksporteret en SVG, er der et par tilføjelser, der skal foretages. Først skal vi tilføje et clipPath-element omkring stien.

Det <clipPath> SVG-elementet definerer en beskæringssti, der skal bruges af clip-path-egenskaben.En beskæringssti begrænser det område, som maling kan anvendes på. Konceptuelt set tegnes de dele af tegningen, der ligger uden for det område, der er afgrænset af udklippestien, ikke. – MDN Docs

På et højt niveau er det ikke så forskelligt fra background-clip-egenskaben, som vi brugte i de tidligere eksempler.

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

clipPath-elementet skal have et ID, der passer til det, vi har tilføjet i vores CSS: videoText. Det skal også have en clipPathUnits="objectBoundingBox"-egenskab og -værdi.

Den sidste ting, der skal tilføjes, er nogle transform-værdier. Vi har brug for disse, fordi selve SVG’en bevidst er indstillet til en højde og bredde på 0 med den CSS, vi har tilføjet. På grund af det skal vi skalere stien op igen, så den er synlig.

For at udlede skaleringsværdierne skal du dividere 1 med højden og bredden. Da teksten i mit eksempel har en bredde på 640px og en højde på 360px :

1 / 640 = 0.0015625

1 / 360 = 0.002777777777778

scale(0.0015625, 0.002777777777778)

Du skal måske eksperimentere lidt med dette, afhængigt af hvilken bredde og højde du ønsker.

Finalt skal du tilføje den færdige SVG 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#

I vores sidste eksempel vil vi skabe en tekstvirkning med delt farve. Der er sandsynligvis et par forskellige måder at gøre dette på, men jeg var i stand til at opnå det med følgende:

Først har vi brug for en h1, bortset fra at vi denne gang tilføjer en data-attribut til den. Du vil se hvorfor om et øjeblik. Vi vil også sikre os, at der er en div omkring h1.

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

Nu til stilene.

.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;}

Der er to vigtige dele her:

1. Anvendelsen af CSS-funktionen attr(). Funktionen henter en attribut fra det valgte element og giver os mulighed for at bruge denne værdi i CSS. I vores tilfælde vil vi have den data-text-attribut, som vi har tilføjet, så vi kan bruge den i content-egenskaben. Dette giver os to tekstelementer at arbejde med: det oprindelige h1-element og psuedoelementet.

2. clip-path-egenskaben. I det foregående eksempel brugte vi en separat SVG som værdien af denne egenskab. Vi gør noget lignende, bortset fra at vi bruger en polygon-form. Det er dette, der giver udseendet af, at tekstfarven er “delt”. Vi bruger formen på denne polygon til at klippe den røde pseudoelementtekst ud, så den kun er delvist synlig, og derefter placerer vi den oven på den hvide h1-tekst ved hjælp af absolut positionering.

Endeligt er en sidste tilføjelse at sikre, at teksten stadig kan vælges.

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

Men uden pointer-events-egenskaben forhindrer pseudoelementet faktisk noget af vores tekst i at blive valgt.

Summary#

Og der har du det: fem forskellige CSS-klip- og maskeringseffekter, som du kan afprøve i dit næste projekt! De eksempler, vi har gennemgået, ridser virkelig kun overfladen af de ting, du kan gøre med disse egenskaber. Nogle andre muligheder kunne omfatte brug af teksturer, mere udførlige SVG’er og forskellige typer af animation.