Diese beiden Eigenschaften verbergen Teile des Motivs:
- clip setzt ein Motiv anhand einer harten Kontur vom Hintergrund ab,
- mask bildet einen weichen Übergang vom Motiv zur Umgebung oder Hintergrund (Vignette).
Alle CSS-Eigenschaften mit clip arbeitet mit einem Pfad, mask mit einem Bitmap-Bild.
CSS clip, clip-path, mask
Freisteller mit einer harten Grenze gibt es in diversen Optionen. Die älteste Version schneidet ein einfaches Rechteck aus einem absolut positionierten Element heraus, aber diese Eigenschaft gilt heute als deprecated (veraltet).
clip-path unterstützt Prozentwerte und ist flexibler als das veraltete clip: rect().
Zu einem SVG-Pfad greift man, wenn komplexere Formen oder Animationen gefragt sind: Mit reinem CSS sind Formen wie das Herz nicht machbar, sondern hier muss sich SVG mit hinzugesellen.
Hintergrundbilder werden mit background-clip beschnitten.
Bilder, die mit einem Verlauf oder mit einer Alpha-Maske vom Hintergrund getrennt werden, fallen aus dem Rahmen und erzeugen eine Vignette.
