Met de toevoeging van een aantal nieuwe CSS eigenschappen in de afgelopen jaren, kunnen frontend ontwikkelaars nu veel makkelijker interessante tekst visuals maken. “Knockout” of “cutout” tekst, waarbij woorden een achtergrondafbeelding, gradient of video clippen, zijn mogelijk met zeer weinig code.

In dit artikel zullen we vijf CSS tekst maskeer en clipping technieken verkennen met behulp van de background-clip en clip-path eigenschappen.

CSS Gradient Text#

Laten we beginnen met het maken van een CSS gradient tekst effect. Het idee is om een achtergrondverloop achter de tekst te zetten en de achtergrond aan de randen van de tekst te “clippen”.

Dit vereist eigenlijk maar vier regels CSS om te bereiken.

Laten we aannemen dat we een h1 hebben.

<h1>Gradients</h1>

In CSS voegen we een achtergrond met kleurverloop toe:

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

Als je net als ik nooit de exacte syntaxis voor CSS kleurverlopen kunt onthouden, kijk dan eens naar de geweldige gradient generator tool op coolors.co.

Nu voegen we de eigenschap toe die het clippen doet: background-clip.

De background-clip CSS-eigenschap bepaalt of de achtergrond van een element zich uitstrekt onder het kader, het opvulvak of het inhoudsvak. – MDN Docs

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

Door de waarde text met deze eigenschap te gebruiken, kan het achtergrondverloop doorlopen en de randen van de achtergrond in de tekst clippen.

De laatste eigenschap die we nodig hebben, is een tekstkleur. Deze moet op transparant worden gezet, zodat de achtergrond volledig zichtbaar is. Zonder dit ziet u waarschijnlijk alleen een dunne omtrek van het kleurverloop.

h1 {...color: transparent;}

De -webkit prefix is eigenlijk vereist voor Chrome en Safari op het moment van dit schrijven omdat de text waarde slechts gedeeltelijke ondersteuning heeft. Het toevoegen van zowel de prefixed als de un-prefixed eigenschappen zou de meeste browsers moeten ondersteunen, behalve Internet Explorer. Als u IE moet ondersteunen, kunt u een niet-transparante tekstkleur toevoegen als een fallback en deze opnemen vóór transparante kleur.

Kijk in de background-clip docs voor volledige browser ondersteunings info.

CSS Animated Gradient Text#

Voor het volgende effect houden we het bij kleurverlopen en gebruiken we een geanimeerd kleurverloop als achtergrond voor de tekst.

<h1>Animated</h1>

En voor de CSS:

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

We blijven de background-clip eigenschappen gebruiken, en stellen de tekstkleur in op transparent, net als in het vorige voorbeeld.

Omdat we met animatie werken, moeten we dat als volgende definiëren. De animatie moet oneindig lopen en afwisselen van links naar rechts, en weer terug.

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

Als laatste definiëren we de animatie keyframe, die de background-size waarde verhoogt om de werkelijke animatie beweging te krijgen.

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

CSS Afbeelding achtergrond tekst#

Dit volgende voorbeeld zal weer vergelijkbaar zijn met de voorbeelden die we zojuist hebben behandeld. Het enige verschil is dat we een echte afbeelding gebruiken in plaats van een kleurverloop als achtergrond.

<h1>Images</h1>

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

In ons geval willen we ervoor zorgen dat de achtergrondafbeelding niet wordt herhaald en verticaal en horizontaal is gecentreerd.

CSS Video Background Text#

Aan de orde, nu gaan we video gebruiken als de achtergrond van onze tekst. Dit effect is anders omdat het een SVG gebruikt in plaats van een h1.

Eerst hebben we een div nodig die een videotag bevat.

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

Op de videotag voegen we enkele eigenschappen toe: loop autoPlay muted playsInline. Tot zover een video looping op de pagina die automatisch afspeelt zonder geluid.

Nu de stijlen:

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

De belangrijkste eigenschap hier is clip-path.

De clip-path CSS eigenschap creëert een clipping region die bepaalt welk deel van een element moet worden getoond. Delen die zich binnen het gebied bevinden, worden weergegeven, terwijl de delen erbuiten worden verborgen. – MDN Docs

Dit wordt iets duidelijker nadat we de SVG hebben toegevoegd, maar in principe willen we het SVG-pad gebruiken als de regio om onze video op te clippen, zoals wordt aangegeven door de url(#videoText)-waarde.

Nu hebben we een SVG nodig. Er zijn tonnen verschillende manieren om ze te maken en te exporteren, maar ik gebruik meestal Figma of Sketch. Het enige wat je hoeft te doen is wat tekst toevoegen in het programma van je keuze en het exporteren als een SVG.

De SVG die ik hieronder gebruik is een vereenvoudigd voorbeeld. De jouwe zal de gebruikelijke xmlns, viewBox, en path eigenschappen hebben.

Als je eenmaal een SVG hebt geëxporteerd, zijn er een paar toevoegingen die je moet doen. Ten eerste moeten we een clipPath element rond het pad toevoegen.

Het <clipPath> SVG element definieert een uitknippad dat moet worden gebruikt door de clip-path eigenschap.Een uitknippad beperkt het gebied waarop verf kan worden toegepast. Conceptueel worden delen van de tekening die buiten het door het uitknippad begrensde gebied liggen, niet getekend. – MDN Docs

Op een hoog niveau verschilt het niet veel van de background-clip eigenschap die we in de vorige voorbeelden hebben gebruikt.

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

Het clipPath element moet een ID hebben die overeenkomt met de ID die we in onze CSS hebben toegevoegd: videoText. Het heeft ook een clipPathUnits="objectBoundingBox" property en waarde nodig.

Het laatste wat we moeten toevoegen zijn een aantal transform waarden. We hebben deze nodig omdat de SVG zelf opzettelijk op een hoogte en breedte van 0 is gezet met de CSS die we hebben toegevoegd. Daarom moeten we het pad terug schalen zodat het zichtbaar is.

Om de schaalwaarden af te leiden, delen we 1 door de hoogte en breedte. Aangezien de tekst in mijn voorbeeld een breedte heeft van 640px en een hoogte van 360px :

1 / 640 = 0.0015625

1 / 360 = 0.002777777777778

scale(0.0015625, 0.002777777777778)

Hiermee moet u misschien een beetje experimenteren, afhankelijk van de breedte en hoogte die u wilt.

Voeg ten slotte de voltooide SVG toe aan de .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#

Voor ons laatste voorbeeld maken we een split color teksteffect. Er zijn waarschijnlijk een paar verschillende manieren om dit te doen, maar ik kon het bereiken met het volgende.

Eerst hebben we een h1 nodig, maar deze keer voegen we er een data attribuut aan toe. Je zult zo zien waarom. We willen er ook voor zorgen dat er een div om de h1 zit.

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

Nu de stijlen.

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

Er zijn twee belangrijke onderdelen hier:

1. Het gebruik van de attr() CSS functie. De functie haalt een attribuut uit het geselecteerde element en laat ons die waarde in CSS gebruiken. In ons geval willen we het data-text attribuut dat we hebben toegevoegd, zodat we het kunnen gebruiken in de content eigenschap. Dit geeft ons twee tekstelementen om mee te werken: het oorspronkelijke h1 en het psuedo element.

2. De clip-path eigenschap. In het vorige voorbeeld gebruikten we een afzonderlijke SVG als de waarde van deze eigenschap. We doen iets soortgelijks, maar gebruiken een polygon vorm. Dit is wat de tekstkleur “gesplitst” doet lijken. We gebruiken de vorm van deze polygon om de rode pseudo-elementtekst te clippen zodat deze slechts gedeeltelijk zichtbaar is, en plaatsen deze vervolgens boven op de witte h1-tekst met behulp van absolute positionering.

Ten slotte is er nog een laatste toevoeging om ervoor te zorgen dat de tekst nog steeds selecteerbaar is.

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

Zonder de pointer-events eigenschap verhindert het pseudo-element in feite dat een deel van onze tekst kan worden geselecteerd.

Samenvatting#

En daar heb je het: vijf verschillende CSS clipping en masking effecten om in je volgende project te proberen! De voorbeelden die we hebben behandeld zijn slechts een tipje van de sluier van wat je met deze eigenschappen kunt doen. Andere opties zijn het gebruik van texturen, uitgebreidere SVG’s, en verschillende soorten animatie.