10 erstaunliche Beispiele für CSS-, SVG- und Canvas-Masken in Aktion

Mit SVG-Masken können Sie einige erstaunliche Dinge tun. Diese Technik gibt es schon seit Jahren, hat aber erst kürzlich ihren Weg in die Mainstream-Webentwicklung gefunden.

Ich habe das Internet durchsucht, um die folgenden Demos von benutzerdefinierten Schnittmasken und SVG-/Leinwandmasken zu finden. Diese Beispiele zeigen, wie weit Sie Masken im Web bringen können und was sie Entwicklern letztendlich bieten können.

1. Textmaskierung

Ein sauberes Beispiel für die Textmaskierung in Aktion finden Sie im obigen Stift. Es verwendet den tatsächlichen Seitentext in HTML, sodass Sie diesen Text leicht ändern können, um zu lesen, was Sie möchten.

Die ganze Magie passiert in CSS mit Eigenschaften wie background-clip. Sie können diese auf so ziemlich jeden Text auf jeder Seite anwenden, aber sie werden nur angezeigt, wenn Sie einen klaren Hintergrund haben.

Auch der Zoom-Effekt wird rein in CSS erstellt, was dieses Code-Snippet noch beeindruckender macht.

2. Polygone ausschneiden

Beachten Sie, dass dieser Stift zwar JavaScript für die komplexen Animationen verwendet, aber die gesamte Maskierung über ein Canvas-Element erfolgt. Es ist eine überraschend komplexe Idee, daher wird es schwierig sein, dem Code zu folgen.

Aber der obige Polygon-Maskierungseffekt ist eines der einzigartigeren Designs, die ich gesehen habe. Es verwendet in CSS entworfene Formen und verwendet JavaScript, um diese Formen als Seitenelemente zum Maskieren eines Hintergrundbilds zu erstellen.

Dies führt eine konsistente Animation aus und läuft auf einem JS-basierten Canvas-Element, das sich wie ein Container für den SVG/XML-Inhalt verhält. Ziemlich verrücktes Zeug, aber es macht Spaß zu sehen, was Masken alles können!

3. Bildmaskierung

Dieses Cut & Dry-Beispiel zeigt, wie eine CSS-Bildmaske aussieht. Sie sehen das Vorher und Nachher der obigen Bildmaske, die von Vincent De Oliveira erstellt wurde.

Beachten Sie, dass die eigentliche schwarze strukturierte Maske nur eine PNG-Datei ist. Aber es wird in CSS dynamisch über ein Bild gelegt, um einen maskierten Fotoeffekt zu erzeugen.

Sie können dies mit jeder gewünschten Textur tun, solange sie mit Transparenz exportiert wird. Es gibt viele Details zur Maskeneigenschaft, und obwohl sie .svg-Dateien unterstützt, finden Sie es möglicherweise einfacher, mit PNGs zu beginnen.

4. Schaltfläche schwebt

Haben Sie schon einmal darüber nachgedacht, Ihre Schaltflächen-Hover-Effekte anzupassen? Nun, dieses Code-Snippet beweist, dass Sie es mit etwas Kreativität und etwas CSS-Maskierung können.

Auch hier läuft der Code auf einer vordefinierten Bildmaske und jede Schaltfläche hat ihren eigenen Maskeneffekt. Der coolste Teil ist die Hover-Animation, die die Maske nicht nur zeigt, sondern sie animiert.

Dies ist sicherlich ein experimentelles Stück Code, aber es sieht in WebKit-Browsern phänomenal aus, und hoffentlich könnte diese Technik in ein paar Jahren zu einem festen Bestandteil werden.

5. SVG-Textmaske

Hier ist ein etwas anderes Beispiel für einen Textmaskeneffekt, der von Entwickler Marco Barria erstellt wurde.

Anstelle dieser Definition benutzerdefinierter SVG-Bilder verwendet der Code tatsächlich ein SVG-Element. Es basiert immer noch auf reinem HTML-Textinhalt, läuft aber mit einem dynamischen SVG-Filter.

Dies ist etwas technischer, gibt dem Entwickler aber auch viel mehr Kontrolle. Anstatt mit Illustrator herumzuspielen, um SVG-Dateien zu erstellen, können Sie Inline-SVGs direkt in Ihrem HTML-Dokument codieren.

6. Canvas-Textmaske

Bei diesem Canvas-Beispiel von Calvin Davis werden Sie feststellen, dass für den Inhalt reines HTML verwendet wird, der Text selbst jedoch nicht auswählbar ist.

Stattdessen wird es auf der Seite mit einem Canvas-Element gerendert, das Text außerhalb des DOM abstrahieren kann. Dadurch verhält es sich eher wie ein Bild, sodass Sie diesen Effekt sehen, bei dem der Text den Hintergrund maskiert, aber es fühlt sich nicht wie Text an.

Einigen Designern gefällt dies aufgrund mangelnder Benutzerfreundlichkeit möglicherweise nicht. Wenn Sie also auswählbaren Text wünschen, würde ich mich nicht um dieses Setup kümmern.

Aber es ist ein cooles Beispiel dafür, wie weit Sie die Typografie mit Leinwänden treiben können.

7. Animierter Farbverlauf

Ein weiterer wirklich cooler Texteffekt ist dieser animierte Verlauf, der vom Entwickler Svante Richter erstellt wurde.

Es verwendet den gesamten SVG-Code in der HTML-Seite, sodass Masken dynamisch erstellt werden. Dieses SVG-Setup funktioniert, indem es die gesamte Seite übernimmt und ihr einen Verlaufshintergrund gibt und diesen Hintergrund dann nur durch den Text maskiert.

Da der Farbverlauf über CSS animiert werden kann, scheint es, als ob der Text der einzige animierte Teil ist. Ziemlich cooler Effekt und etwas, das Sie einer experimentellen Website oder Zielseite hinzufügen könnten.

8. Animierte Schnittmaske

Diese abstrakte Schnittmaskenanimation verwendet JS-betriebene Blasen, die zufällig generiert werden, um ein Bild zu maskieren. Es verwendet ein Canvas-Element zusammen mit animierten Schnittmasken, die zu einem zusammenhängenden SVG-Blob-Ding zusammengesetzt werden.

Es mag nicht nach viel erscheinen, aber Entwickler Neil McCallion hat einen ziemlich süßen Code geschrieben, und das Endergebnis ist definitiv seltsam.

Die Maskierung erfolgt hauptsächlich im Canvas-Element, wird jedoch über JavaScript gesteuert. Es ist eine unterhaltsame Art, zwei Bilder mit einer abstrakten SVG-Animation zu mischen.

Auch dies mag auf einer realen Website nicht vielen Zwecken dienen, aber es ist ein cooles Experiment zum Basteln mit Masken.

9. SVG-BG-Maske

Auf der anderen Seite ist hier ein Maskierungseffekt, den Sie auf fast jeder Website ausführen können.

Dabei wird neben einem Hero-Header ein Hintergrundverlauf verwendet, um einen komplexen Maskierungseffekt zu erzeugen, der sich dennoch perfekt einfügt.

Entwickler Ryna Rudenko ging mit diesem Stift an die Grenzen, indem er ein rohes Canvas-Element mit den meisten Maskierungseffekten im HTML-Layer verwendete.

Diese Maske ist nicht nur praktisch und in einem großen Header verwendbar, sondern auch wirklich gut verarbeitet und läuft ausschließlich auf HTML5 und CSS3. Ein Paradebeispiel für sinnvoll eingesetzte moderne Webstandards.

10. CSS- und SVG-Masken

Diese vollständige Galerie von SVG-Masken zeigt wirklich, wie viel man mit reinem CSS machen kann.

Es ist eine Demo, die eine Reihe verschiedener Maskierungstechniken zeigt, die alle dasselbe Foto und unterschiedliche Formate verwenden. Außerdem enthält jedes Beispiel Beispielcodes direkt auf der Seite, die Sie selbst testen können – obwohl es genauso einfach ist, den Code aus dem CodePen-Editor zu kopieren.

Aber dieser kleine Stift fungiert eher als geführte Einführung in verschiedene Bildmaskierungseffekte, die Sie ausführen können. Toller Ausgangspunkt, wenn Sie mit einfachen Demos in SVGs und Masken eintauchen möchten.