Textmasken mit CSS erstellen

Textmasken erfreuen sich im Grafik-Design – insbesondere im Print-Design – größter Beliebtheit. Leider war es mit Webtechnologien lange Zeit kaum möglich eine Textmaske herzustellen, bei der der Text als Reintext im HTML-Code steht. Aber gerade das ist wichtig, damit der Text geändert und übersetzt, sowie von Suchmaschinen und Screenreadern ausgelesen werden kann. In diesem Beitrag zeigen wir, wie ihr mit Hilfe von CSS Blend Modes eine semantisch korrekte Textmaske erstellt.

Das Grundprinzip verstehen

Die Textmaske besteht aus zwei Elementen: Dem Text selbst und einem Element, dass diesen Text überlagert und den Inhalt der Maske bereitstellt. Im Idealfall ist dieses Überlagerungselement ein CSS Pseudoelement.

Mit Hilfe eines CSS Blend Modes wird nun das Element mit dem Text verrechnet. Einen detaillierten Beitrag zu CSS Blend Modes findet ihr hier. Wenn der Hintergrund der Textmaske weiß sein soll, dann benötigt ihr schwarzen Text und den Blendmodus »screen« (In Photoshop »Negativ Multiplizieren«). Wenn der Hintergrund der Textmaske schwarz ist, benötigt ihr weißen Text und den Blendmodus »multiply« (In Photoshop »Multiplizieren«).

Text mit Farbverlauf weißem Grund

Der folgende CSS-Code ist notwendig, um eine Textmaske auf weißem Grund zu erzeugen. Der Blendmodus »screen« sorgt dafür, dass alle Pixel des Überlagerungselements sichtbar sind, die vor schwarzen Pixeln platziert wurden. Alles was vor weißen Pixeln positioniert wurde ist unsichtbar. Graue Pixel sorgen für Halbtransparenzen.

Beispiel anschauen

<h1>kulturbanause.de</h1>

h1 {
 position: relative;
 color:black;
}

h1:before {
 position: absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 content: '';
 background:linear-gradient(45deg, gold, deeppink);
 mix-blend-mode:screen;
}

Text mit Farbverlauf auf schwarzem Grund

Der folgende CSS-Code erzeugt eine Textmaske auf schwarzem Grund. Hier ist es genau umgekehrt. Der Modus »multiply« sorgt dafür, dass nur die Pixel des Überlagerungselements sichtbar sind, die vor weißen Pixeln positioniert werden. Alles was vor schwarz steht ist unsichtbar.

Beispiel anschauen

<h1>kulturbanause.de</h1>

html {
 background:black;
}

h1 {
 position: relative;
 color:white;
}

h1:before {
 position: absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 content: '';
 background:linear-gradient(45deg, gold, deeppink);
 mix-blend-mode:multiply;
}

Textmaske aus Bild

Die bisherigen Beispiele arbeiten mit einem Verlauf. Selbstverständlich kann auch ein Bild oder ein Video innerhalb des Textes dargestellt werden.

Beispiel anschauen

Geschrieben von Jonas

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Jonas Hellwig bei Xing