CSS-Versteckspiel: Clipping- und Masking-Effekte
Kommentare

Auf Elemente lassen sich verschiedene Effekte anwenden, um Bereiche eines Elements ein- oder auszublenden. Clipping und Masking werden häufig als synonyme Begriffe dafür verwendet, tatsächlich gibt es aber einige Unterschiede zwischen beiden Methoden – nicht nur, was ihr Einsatzgebiet angeht, sondern auch hinsichtlich Syntax, Technologien und Browser-Support. Chris Coyier erklärt diese Unterschiede und zeigt, wie sich beide Methoden einsetzen lassen.

Unterschiede zwischen Clipping und Masking

Der größte Unterschied zwischen beiden Methoden ist ihre Basis: Während Masken Bilder sind, die aussehen, als würden sie von links nach rechts eingeblendet werden, sind Clips Vektor-Pfade. Dabei ist das Äußere des Pfades transparent, während das Innere undurchsichtig ist.

Grundsätzlich werden beide Methoden von den verschiedenen Browsern unterstützt, allerdings gibt es deutliche Unterschiede, was den Support der unterschiedlichen Properties und Werte angeht.

Clipping

clip-Properties gibt es schon lange in CSS und boten eine einfache Möglichkeit Teile eines Elements einzublenden, allerdings sind sie mittlerweile veraltet und durch clip-path ersetzt worden. Damit gibt es für Nutzer die Möglichkeit, neben Rechtecken auch andere Formen ein- beziehungsweise auszublenden, etwa Kreise, Ellipsen und Polygone. Werden diese Basis-Formen als Clip-Pfad definiert, können sie zusätzlich animiert werden, um auffällige Effekte zu erzeugen.

Ein weiterer Vorteil ist, dass der Clip-Pfad-Wert nicht direkt im CSS definiert werden muss, sondern auch auf ein in SVG definiertes <clipPath>-Element zugreifen kann. Allerdings muss dabei im Hinterkopf behalten werden, dass SVG-definierte Clip-Pfade an der oberen linken Ecke des Dokuments ausgerichtet werden und der Pfad sich so nicht mit dem Element mitbewegt.

Masking

Ursprünglich konnte ein Raster-Bild oder ein Gradient als Maske definiert werden. Das funktioniert zwar in Webkit/Blink-basierten Browsern immer noch, ist allerdings durch andere Methoden ersetzt worden. So können Masken als SVG definiert und im CSS darauf als ID oder URL zugegriffen werden. Zudem gibt es verschiedene Masken-Typen sowie die Möglichkeit des Border-Masking, bei dem ein neunteiliges Raster auf das SVG-Bild angewandt wird.

In seinem Artikel zum Thema Clipping and Masking in CSS finden sich zahlreiche Code-Beispiele sowie Demos, die die Nutzung beider Methoden verdeutlichen. Dort findet sich zudem auch eine nützliche Übersicht zum Browser-Support von Clipping und Masking, die Anreiz bieten kann, das nächste Web-Projekt mit einigen Effekten wirkungsvoll zu gestalten.

Aufmacherbild: Theatrical mask on a white background. von Shutterstock / Urheberrecht: ElenaShow

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -