Florence Maurice

Webthemen

Ausschneiden mit CSS3 - clip-path

Geschrieben am:

sternförmig ausgeschnittenes Bild

Bilder im Web sind im Prinzip eckig ... das ändert sich glücklicherweise mit dem CSS-Masking-Module.

Das CSS Masking Module Level 1 ist am 26. August 2014 in den Status einer Candidate Recommendation erhoben worden - und das W3C fordert zu Implementierungen auf. Der richtige Zeitpunkt, das einmal genauer unter die Lupe zu nehmen ...

An sich definiert das Masking Module zwei Dinge: zum einen, wie man Masken per CSS erstellt und zum anderen, wie man clip-path - also Ausschneidepfade - in CSS verwendet. Während die Masken relativ komplex sind - es sind sehr viele Eigenschaften involviert - sind die Ausschneidepfade recht geradlienig. Manche Effekte lassen sich sowohl über clip-path als auch über Masken realisieren. In diesen Fällen rät das W3C zur Verwendung der Einsatz clip-path.

Sehen wir uns an, wie die neu eingeführte CSS-Eigenschaft clip-path funktioniert.

Hinter clip-path gibt man eine Form an. Wenn man dann clip-path auf ein Element anwendet, so ist es beschnitten: Alles, was außerhalb der definierten Form wäre, ist entfernt.

Wie aber definiert man die Ausschneideform? Am einfachsten ist es, eine der vier möglichen Basisformen zu verwenden:

Kurz zur Syntax: Die Angabe bei circle() funktioniert genauso wie die Angabe bei radialen Farbverläufen. Zuerst steht der Radius und hinter at wird die Koordinate des Mittelpunkts bestimmt. Die Funktion ellipse() funktioniert wie circle(), allerdings sind am Anfang zwei Werte möglich - der eine gibt die  Länge der horizontalen Halbachse an, der andere die Länge der senkrechten Halbachse.

Bei inset() kann man bestimmen, um wie viel von außen zugeschnitten werden soll. Die Grundform bleibt ein Rechteck, allerdings sind hinter round Angaben für die Rundung der Ecken möglich. Die Funktion polygon() ist am flexibelsten, hier kann man mehrere X-Y-Koordinaten festlegen und damit beliebige Formen zeichnen.

clip-path - Kreis, Ellipse, inset, Polygon,

Kommen wir zum Thema Browserunterstützung, das Ganze funktioniert mit dem -webkit-Präfix in Webkit-Browsern, ab Chrome 55 auch ohne Präfix, außerdem geht es im Firefox ab Version 54. Ein Beispiel zum Ausprobieren: clip-path im Einsatz.

Es gibt eine Möglichkeit auch ältere Firefox-Versionen zur Mitarbeit zu überreden. Dafür gibt man hinter der Eigenschaft clip-path die url()-Funktion an und verweist auf einen in SVG definierten clip-path:

<style>
.bild {
-webkit-clip-path: url(#clipping);
clip-path: url(#clipping);
}
</style>
<svg height="0" width="0">
<clipPath id="clipping">
<polygon points="10 100, 300 30, 220 220" />
</clipPath>
</svg>

Das mit dem polygon im SVG-Teil definierte clip-path legt dieses Mal ein Dreick fest.

clip-path für ein Dreieck

clip-path mit url() ausprobieren

Soll die Browserunterstützung noch weiter reichen (yepp, der IE oder Edge waren bisher nicht dabei), muss man direkt auf SVG zugreifen. Das bedeutet: zum einen definiert man innerhalb von svg das clipPath-Element für den gewünschten Ausschnitt. Außerdem steht aber auch das Element, auf das der clipPath angewandt werden soll, innerhalb von SVG: Im Beispiel wird das Bild mit dem image-Element eingebunden, der Pfad zum  Bild steht innerhalb von xlink:href. Zusätzlich wird bei dem clip-path-Attribut auf das vorher definierte clipPath-Element verwiesen:

<svg height="225" width="300"> 
<clipPath id="clipping">
<polygon points="10 100, 300 30, 220 220" />
</clipPath>
<image xlink:href="weg.jpg" x="0" y="0" width="300" height="225" clip-path="url(#clipping)" />
</svg>

Das Ergebnis ist wiederum ein dreieckig ausgeschnittenes Bild.

Bei jsFiddle ausprobieren: clipPath in SVG

Warum aber clip-path nutzen und nicht das Bildbearbeitungsprogramm der Wahl anwerfen? clip-path hat mehrere Vorteile:

Zusammengefasst ...

... das Wichtigste zur Eigenschaft clip-path: