Ausschneiden mit CSS3 – clip-path

Über clip-path aussgeschnittenes 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:

  • Kreisförmiger Ausschnitt: clip-path: circle(100px at 50% 50%);
  • Ellipsenförmiger Ausschnitt: clip-path: ellipse(95px 50px at 50% 50%);
  • (Abgerundeter) rechteckiger Ausschnitt: clip-path: inset(10% 10% 10% 10% round 20% 20%);
  • Polygon für beliebige Formen: clip-path: polygon(100% 50%,XX YY ...)

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 leidigen Thema der Browserunterstützung, das Ganze funktioniert mit dem -webkit-Präfix in Webkit-Browsern.
Ein Beispiel zum Ausprobieren: clip-path im Einsatz.

Es gibt allerdings eine Möglichkeit, den Firefox zur Mitarbeit zu überlegen. 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 war bisher noch 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:

  • clip-path kann man dynamisch anwenden.
  • clip-path lässt sich animieren.
  • clip-path kann man auf beliebige Inhalte anwenden, nicht nur auf Bilder, sondern genauso auch auf Texte oder ganze Webseitenbereiche. Die Texte aber bleiben dabei weiter Texte.

Zusammengefasst …

… das Wichtigste zur neuen Eigenschaft clip-path:

  • Hinter clip-path kann man eine Basisform angeben über eine Funktion wie circle(), ellipse(), inset() oder polygon().
  • Webkit-Browser verstehen die Eigenschaft -webkit-clip-path mit Basisformen.
  • Im Firefox funktioniert nur clip-path mit url(), wobei man bei url() auf einen in SVG definierten clipPath verweist.
  • Für eine breitere Browserunterstützung muss man direkt auf SVG zurückgreifen.

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>