kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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«).

css-text-mask
Schwarzer Text auf weißem Grund wird mit einem farbigen Verlauf im Blendmodus »screen« überlagert, um den Verlauf auf den Text zu begrenzen

 

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

7 Kommentare

  1. Sahin

    Verfasst am 21. September 2016 um 14:03 Uhr.

    Schade dass der IE das nicht zu 100% supported. Was würdest du für einen Fallback für IE empfehlen?

    • Jonas Hellwig

      Verfasst am 21. September 2016 um 14:29 Uhr.

      Hallo Sahin, ich würde wahrscheinlich die Maske weglassen und stattdessen den Text einfärben.

  2. Franz Meyer

    Verfasst am 21. September 2016 um 17:47 Uhr.

    Super Artikel!

  3. René Philipp

    Verfasst am 22. September 2016 um 20:13 Uhr.

    Hallo, Jonas.

    Als Redakteur einer Vereinsseite habe ich eine etwas komplexere Variante des Farbverlaufs auf einigen Seiten von http://www.esperanto-nb.de plaziert. Eine Beschreibung dazu gibt es dort auch, und zwar unter http://esperanto-nb.de/tekniko/technik-gradient.html ganz unten. Weiter oben stehen die älteren Versionen.

    Da einige Formatierungen nur zusammen mit mix-blend-mode sinnvoll sind, habe ich das ganze in @supports gepackt.

    Gruß

    René

  4. Lisa Schubert

    Verfasst am 27. September 2016 um 13:10 Uhr.

    Hallo,

    was denkt ihr, ab welcher Schriftgröße macht es überhaupt Sinn ein Bild als Textmaske zu verwenden?
    Also ab welcher Schriftgröße geht ihr davon aus, dass das Motiv wenigstens in Teilen zu erkennen ist?

    Grüße,
    Lisa

    • Jonas Hellwig

      Verfasst am 27. September 2016 um 13:58 Uhr.

      Hallo Lisa, das kann man pauschal schwer beantworten. Verläufe gehören ja technisch gesehen auch schon dazu. Aber so wie es hier unten bei POTD umgesetzt ist, finde ich es auch in kleinen Schriftgrößen sehr ansprechend.

  5. Daniel

    Verfasst am 12. Oktober 2016 um 21:06 Uhr.

    Gibt es auch die Möglichkeit das mit anderen Hintergrundfarben zu machen? Oder nur s/w ?
    #373f5b wäre mein Hintergrund und ich habe es mit verschiedenen Farben versucht. Geht das irgendwie?

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.