kulturbanause Blog

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

Ausgeschnittener Text mit CSS

Ein einzelner interessanter Effekt kann das Layout der gesamten Website spürbar verbessern. Maskierter bzw. ausgeschnittener Text, durch den man eine weiter hinten liegende Ebene – z. B. ein Foto oder einen Verlauf – sieht, kann ein spannender Eyecatcher sein. Mit CSS lässt sich der Effekt unkompliziert herstellen. Der Trick basiert auf der Blend Mode-Technik und kann sehr gut nach dem Prinzip des Progressive Enhancement eingesetzt werden.

Workshops und Seminare von kulturbanause

Adobe XD, Performance, Responsive Design, Sketch, Visual Prototyping, Web Animationen, Corporate Design …

Jetzt Frühbucher-Rabatte sichern!

Typo cut-out mit CSS

Damit der Effekt sichtbar wird sind zwei Elemente notwendig. Der Text und ein Container-Element, dass den Hintergrund erhält, der durch den Text hindurch sichtbar sein soll. Im folgenden Beispiel ist dieser Hintergrund ein Verlauf – ein Foto wäre natürlich ebenfalls möglich.

Transparenter Text auf weißer bzw. schwarzer Grundfläche
Transparenter Text auf weißer bzw. schwarzer Grundfläche

Der Text innerhalb des Containers erhält ebenfalls einen Hintergrund. Ist dieser Hintergrund weiß, muss die Textfarbe schwarz sein. Ist der Hintergrund schwarz, muss weißer Text verwendet werden.

<div class="container">
  <div class="text-light">kulturbanause_</div>
  <div class="text-dark">kulturbanause_</div>
</div>
/* Wir zeigen hier nur den für das Beispiel relevanten CSS Code */

.container {
  /* hier die gewünschte Hintergrundgestaltung */
}

.text-dark {
  background-color: black;
  color: white;
  mix-blend-mode: multiply;
}

.text-light {
  background-color: white;
  color: black;
  mix-blend-mode: screen;
}

Die CSS Blendmodi screen bzw. multiply sorgen dafür, dass schwarzer Text auf weiß bzw. weißer Text auf schwarz transparent werden. Dazu wird mit mix-blend-mode das Text-Element mit dem Hintergrund verrechnet. Der Effekt ähnelt dem Einsatz einer Maske.

Beispiel anzeigen

Browser-Support und Progressive Enhancement

In alten bzw. nicht-kompatiblen Browser wird der Text schwarz bzw. weiß dargestellt. Somit ist die Lesbarkeit in allen Systemen gewährleistet und es entsteht kein optischer Fehler. Es fällt wahrscheinlich nicht einmal auf, dass die Basis-Version dargestellt wird, wenn der Vergleich mit der optimalen Version nicht bekannt ist.

Die Fallback-Lösung für inkompatible Browser

In allen Browser in denen die CSS-Technologie Blend Modes unterstützt wird ist der Text transparent ausgeschnitten. Moderne Systeme erfahren somit eine Verbesserung nach dem Prinzip des Progressive Enhancement.

Den detaillierten Browsersupport findet ihr auf caniuse.com.

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

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.