Typografische Illustrationen mit CSS-Masken
Du kannst Typo auf Webseiten sehr schön als illustratives Element einsetzen, zum Beispiel mit CSS- oder SVG-Masken. Mit CSS lässt sich Text nicht nur einfärben, sondern auch mit Verläufen oder Bildern füllen.
Dazu kannst du dem Text (zum Beispiel einer Überschrift erster Ordnung) ein Hintergrundbild zuweisen. Allerdings hast du dann zunächst nur einen schwarzen Text und das Bild ist komplett im Hintergrund deiner Überschrift zu sehen.
Wenn du nun die CSS Eigenschaft background-clip einsetzt (background-clip: text;) und der Überschrift als Farbe transparent mit auf den Weg gibst, dann ist der Hintergrund nur innerhalb des Textes zu sehen. Im folgenden Beispiel ist der Text mit einem Verlauf gefüllt.
Du findest das oben stehende Beispiel unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/background-clip-Verlauf.html. Schau dir den gut kommentierten Quellcode in der Datei an, wenn du mit diesem Effekt in deinen Projekten arbeiten möchtest.
Statt eines Verlaufs kannst du auch ein Bild oder ein Video in den Hintergrund des Textes legen.
Auch hier findest du den Quellcode in der Datei https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/background-clip-Bild.html.
Das Hintergrundbild lässt sich auch animieren …
wie du in der Datei unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/background-clip-animiert.html sehen kannst.
Einen weiteren interessanten Effekt kannst du mit der CSS-Eigenschaft mix-blend-mode erzeugen.mix-blend-mode ist eine CSS-Eigenschaft, mit der du steuerst, wie ein Element farblich mit dem Hintergrund verschmolzen wird.
Du kannst dieser CSS-Eigenschaft verschiedene Werte zuweisen. Zum Beispiel multiply, was dazu führt, dass ein Element abgedunkelt wird. Screen hat den gegenteiligen Effekt und hellt auf. Und overlay ist eine Mischung aus screen und multiply, es sorgt für eine kontrastreiche Mischung. Weitere Werte wären difference oder lighten siehe
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode.
Unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/mix-blend-mode.html findest du den entsprechenden Quellcode.
An der Stelle soll nicht unerwähnt bleiben, dass du auch Masken mit SVG erstellen kannst. SVG (Scalable Vector Graphics) unterstützt die Eigenschaften mask oder clipPath. Eine Maske definiert, welche Bereiche sichtbar und welche transparent sind. Siehe mein Beispiel unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/SVG-Maske.html.
Generell kommst du mit reinem CSS etwas schneller und einfacher als mit SVG-Masken zum Ziel, du hast eine bessere Browserkompatibilität und Performance. Nur in einem Punkt haben SVG-Masken etwas die Nase vorn, nämlich, wenn es um komplexe Animationen geht. Du findest unter anderem auf CodePen viele weitere interessante Beispiele zu diesem Thema.
SVG gradient animation: https://codepen.io/k-ivan/pen/XVzEZb
SVG-Animation: https://codepen.io/theadhocracy/pen/qBjNeOb
Oder https://codepen.io/collection/LPZWGv?cursor=eyJwYWdlIjoxfQ==
Literaturhinweise
CSS mask-image Eigenschaft: https://www.w3schools.com/css/css3_masking.asp und https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image
Mein Youtube–Tutorial zu diesem Thema: https://www.youtube.com/watch?v=F3VjLaEdDmE
Per Maske animierte Illustration: https://www.youtube.com/watch?v=dldpud1PuL8
