Mit der Hinzufügung einiger neuer CSS-Eigenschaften in den letzten Jahren können Frontend-Entwickler jetzt viel einfacher interessante Textvisualisierungen erstellen. “Knockout”- oder “Cutout”-Text, bei dem Wörter ein Hintergrundbild, einen Farbverlauf oder ein Video ausschneiden, ist mit sehr wenig Code möglich.

In diesem Artikel werden wir fünf CSS-Textmaskierungs- und -ausschnitttechniken mit den Eigenschaften background-clip und clip-path untersuchen.

CSS Gradient Text#

Beginnen wir mit der Erstellung eines CSS-Gradient-Text-Effekts. Die Grundidee ist, einen Hintergrundverlauf hinter den Text zu setzen und dann den Hintergrund an den Rändern des Textes “abzuschneiden”.

Dies erfordert eigentlich nur vier Zeilen CSS, um dies zu erreichen.

Angenommen, wir haben einen h1.

<h1>Gradients</h1>

In CSS fügen wir einen Hintergrund mit Farbverlauf hinzu:

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

Wenn Sie wie ich sind und sich nie die genaue Syntax für CSS-Farbverläufe merken können, sehen Sie sich das großartige Tool zum Generieren von Farbverläufen bei coolors.co an.

Nun fügen wir die Eigenschaft hinzu, die den Ausschnitt erstellt: background-clip.

Die CSS-Eigenschaft “background-clip” legt fest, ob der Hintergrund eines Elements unterhalb seines Rahmens, seines Auffüllungsrahmens oder seines Inhaltsrahmens verläuft. – MDN Docs

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

Die Verwendung des Wertes text mit dieser Eigenschaft ermöglicht es, dass der Hintergrundverlauf durchläuft und die Kanten des Hintergrunds innerhalb des Textes abschneidet.

Die letzte Eigenschaft, die wir benötigen, ist eine Textfarbe. Sie sollte auf transparent gesetzt werden, damit der Hintergrund vollständig sichtbar ist. Andernfalls ist wahrscheinlich nur ein dünner Umriss des Farbverlaufs zu sehen.

h1 {...color: transparent;}

Das Präfix -webkit ist zum Zeitpunkt der Erstellung dieses Artikels für Chrome und Safari erforderlich, da der Wert text nur teilweise unterstützt wird. Das Hinzufügen der Eigenschaften mit und ohne Präfix sollte die meisten Browser außer dem Internet Explorer unterstützen. Wenn Sie den IE unterstützen müssen, können Sie eine nicht-transparente Textfarbe als Fallback hinzufügen und sie vor der transparenten Farbe einfügen.

Prüfen Sie die background-clip-Dokumente für vollständige Informationen zur Browserunterstützung.

CSS Animated Gradient Text#

Für den nächsten Effekt bleiben wir bei Farbverläufen und verwenden einen animierten Farbverlauf als Texthintergrund.

<h1>Animated</h1>

Und für das CSS:

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

Wir verwenden weiterhin die background-clip-Eigenschaften und setzen die Textfarbe auf transparent, genau wie im vorherigen Beispiel.

Da wir mit Animation arbeiten, müssen wir diese als nächstes definieren. Die Animation soll endlos laufen und von links nach rechts und wieder zurück wechseln.

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

Zuletzt definieren wir den Animations-Keyframe, der den background-size-Wert erhöht, um die eigentliche Animationsbewegung zu erhalten.

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

CSS Image Background Text#

Das nächste Beispiel ist wieder ähnlich wie das, das wir gerade behandelt haben. Der einzige Unterschied ist, dass wir ein tatsächliches Bild anstelle eines Farbverlaufs als Hintergrund verwenden.

<h1>Images</h1>

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

In unserem Fall wollen wir sicherstellen, dass sich das Hintergrundbild nicht wiederholt und vertikal und horizontal zentriert ist.

CSS Video Background Text#

Als nächstes werden wir ein Video als Hintergrund für unseren Text verwenden. Dieser Effekt unterscheidet sich insofern, als er ein SVG anstelle eines h1 verwendet.

Zunächst benötigen wir ein div, das ein Video-Tag enthält.

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

Zum Video-Tag fügen wir einige Eigenschaften hinzu: loop autoPlay muted playsInline. So weit, so gut, damit sollten Sie ein Video in einer Schleife auf der Seite haben, das automatisch ohne Ton abgespielt wird.

Nun zu den Stilen:

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

Die wichtigste Eigenschaft hier ist clip-path.

Die clip-path CSS-Eigenschaft erstellt einen Beschneidungsbereich, der festlegt, welcher Teil eines Elements angezeigt werden soll. Teile, die sich innerhalb des Bereichs befinden, werden angezeigt, während die Teile außerhalb ausgeblendet werden. – MDN Docs

Nachdem wir das SVG hinzugefügt haben, wird dies etwas mehr Sinn machen, aber im Grunde genommen wollen wir den SVG-Pfad als den Bereich verwenden, auf den unser Video zugeschnitten wird, worauf der url(#videoText)-Wert verweist.

Nun brauchen wir ein SVG. Es gibt viele verschiedene Möglichkeiten, diese zu erstellen und zu exportieren, aber ich verwende normalerweise Figma oder Sketch. Alles, was Sie wirklich tun müssen, ist, in dem Programm Ihrer Wahl Text hinzuzufügen und ihn als SVG zu exportieren.

Das SVG, das ich unten verwende, ist ein vereinfachtes Beispiel. Ihres wird die üblichen xmlns, viewBox und path Eigenschaften haben.

Nachdem Sie ein SVG exportiert haben, müssen Sie noch ein paar Ergänzungen vornehmen. Zunächst müssen wir ein clipPath-Element um den Pfad herum hinzufügen.

Das <clipPath>-SVG-Element definiert einen Beschneidungspfad, der von der clip-path-Eigenschaft verwendet wird.Ein Beschneidungspfad schränkt den Bereich ein, auf den Farbe angewendet werden kann. Konzeptuell werden Teile der Zeichnung, die außerhalb des durch den Beschneidungspfad begrenzten Bereichs liegen, nicht gezeichnet. – MDN Docs

Im Großen und Ganzen unterscheidet sich diese Eigenschaft nicht allzu sehr von der background-clip-Eigenschaft, die wir in den vorangegangenen Beispielen verwendet haben.

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

Das clipPath-Element sollte eine ID haben, die derjenigen entspricht, die wir in unserem CSS hinzugefügt haben: videoText. Es braucht auch eine clipPathUnits="objectBoundingBox"-Eigenschaft und einen Wert.

Das letzte, was wir hinzufügen müssen, sind einige transform-Werte. Diese werden benötigt, weil die SVG selbst mit dem hinzugefügten CSS absichtlich auf eine Höhe und Breite von 0 gesetzt wird. Aus diesem Grund müssen wir den Pfad wieder skalieren, damit er sichtbar ist.

Um die Skalierungswerte zu ermitteln, teilen Sie 1 durch die Höhe und Breite. Da der Text in meinem Beispiel eine Breite von 640px und eine Höhe von 360px hat:

1 / 640 = 0.0015625

1 / 360 = 0.002777777777778

scale(0.0015625, 0.002777777777778)

Abhängig von der gewünschten Breite und Höhe müssen Sie eventuell ein wenig damit experimentieren.

Schließlich fügen Sie das fertige SVG in das .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 unser letztes Beispiel werden wir einen Effekt mit geteilter Farbe erstellen. Es gibt wahrscheinlich einige verschiedene Möglichkeiten, dies zu tun, aber ich konnte es mit dem Folgenden erreichen.

Zuerst brauchen wir ein h1, aber dieses Mal fügen wir ein data-Attribut hinzu. Warum das so ist, werden Sie in einer Minute sehen. Wir wollen auch sicherstellen, dass es ein div um das h1 gibt.

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

Nun zu den Stilen.

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

Hier gibt es zwei wichtige Teile:

1. Die Verwendung der attr() CSS-Funktion. Die Funktion holt ein Attribut aus dem ausgewählten Element und lässt uns diesen Wert in CSS verwenden. In unserem Fall wollen wir das Attribut data-text, das wir hinzugefügt haben, in der Eigenschaft content verwenden. Damit haben wir zwei Textelemente, mit denen wir arbeiten können: das ursprüngliche h1 und das psuedo-Element.

2. Die Eigenschaft clip-path. Im vorherigen Beispiel haben wir ein separates SVG als Wert dieser Eigenschaft verwendet. Wir machen etwas Ähnliches, verwenden aber eine polygon-Form. Dadurch entsteht der Eindruck, dass die Textfarbe “geteilt” ist. Wir verwenden die Form dieses polygon, um den roten Pseudo-Element-Text abzuschneiden, so dass er nur teilweise sichtbar ist, und positionieren ihn dann über dem weißen h1-Text mit absoluter Positionierung.

Ein letzter Zusatz soll sicherstellen, dass der Text immer noch auswählbar ist.

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

Ohne die pointer-events-Eigenschaft verhindert das Pseudo-Element tatsächlich, dass ein Teil unseres Textes ausgewählt werden kann.

Zusammenfassung#

Und da haben Sie es: fünf verschiedene CSS-Ausschnitt- und Maskierungseffekte, die Sie in Ihrem nächsten Projekt ausprobieren können! Die Beispiele, die wir behandelt haben, kratzen wirklich nur an der Oberfläche der Dinge, die Sie mit diesen Eigenschaften tun können. Einige andere Optionen könnten die Verwendung von Texturen, aufwändigeren SVGs und verschiedenen Arten von Animationen beinhalten.