Quelle: Shutterstock/An147yus
CSS: clip-path und mask einsetzen und animieren 07.10.2019, 15:05 Uhr

Ausschneiden und Maskieren

Elemente lassen sich in CSS mit clip-path und mask bearbeiten – und das geht natürlich dynamisch und ist sogar animierbar.
Clip-path und mask sind eine fortgeschrittene Möglichkeit in CSS, Elemente zu bearbeiten. Mit clip-path bestimmen Sie, wie Elemente ausgeschnitten werden sollen. Und über mask lassen sich Masken anwenden, wie man es sonst von der Bildbearbeitung kennt. Der Vorteil, solche Operationen per CSS durchzuführen, besteht darin, dass man sie dynamisch als Reaktion auf eine Benutzeraktion durchführen kann und dass sich diese Bearbeitungen auch in Animationen nutzen lassen.
Bevor wir zu den Animationen kommen, erfahren Sie im Artikel erst einmal die grundlegende Funktionsweise von clip-path und mask. Beide Eigenschaften (sowie ihre Untereigenschaften) werden in der W3C-Spezifikation »CSS Masking Module Level 1« beschrieben, die sich im Zustand einer »Candidate Recommendation« befindet; den Stand der aktuellen Diskussion spiegelt der Editors Draft wider.

web & mobile DEVELOPER

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt web&mobile Developer plus Kunde.
  • 2 Monate Gratis testen
  • Über 4.000 qualifizierte Fachartikel
  • Diverse DevBooks thematisch für Sie zusammen gestellt
  • Webcasts von 30 - 90 Min.
  • Aufzeichnungen von ausgewählten Fortbildungen und Konferenzen
  • Auf jedem Gerät verfügbar