CSS/Tutorials/Masken und Beschneidungen

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
2x30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
CSS


Oft möchte man bei Grafiken nur einen bestimmten Bildausschnitt darstellen. Die konventionelle Vorgehensweise war bisher, die Grafik in einem Bildbearbeitungsprogramm zuzuschneiden oder mit einem (teil)transparenten Hintergrund als gif oder png abzuspeichern.

Ursprünglich in SVG entwickelt, ermöglicht das CSS Masking Module des W3C auch den Einsatz in der HTML-Welt. Mit clip-path können Sie den gewünschten Bildausschnitt per CSS festlegen. Dabei sind aber nur scharfe Kanten möglich, weiche Übergänge können Sie mit Masken erreichen.