Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-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.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: