Design

CSS3: Komplexe Beschneidungspfade mit der Eigenschaft Clip-Path

17. Juni 2013
von

Bisher war es mit CSS nicht möglich, Elemente jenseits rechteckiger Begrenzungen darzustellen. Die mittlerweile etablierte Eigenschaft „border-radius“ erlaubt zwar abgerundete Ecken, die somit auch eine runde Grundform erlauben; komplexere Beschneidungen sind damit aber nicht zu erstellen. Die CSS3-Eigenschaft „clip-path“ bringt jedoch komplexe Beschneidungspfade zur Anwendung, die auch per SVG-Grafik definiert werden können.

css_clip-path

Maskierung in CSS nicht neu, aber…

Die Möglichkeit, Elemente per CSS zu beschneiden beziehungsweise zu maskieren, ist nicht neu. Bereits seit CSS 2.1 gibt es die Eigenschaft „clip“, die es erlaubt, ein Element an den Seiten zu beschneiden. Allerdings erlaubt die Eigenschaft nur eine rechteckige Maskierungsform:

img {
  position: absolute;
  clip: rect(10px, 10px, 50px, 50px);
}

Außerdem funktioniert die Eigenschaft nur bei absolut platzierten Elementen. Wesentlich mehr Möglichkeiten hat die CSS3-Eigenschaft „clip-path“. Neben rechteckigen Maskierungen lassen sich auch elliptische, runde und polygonale Formen realisieren:

img {
  clip-path: rectangle(10px, 10px, 50px, 50px, 5px, 5px);
}

Während die ersten vier Werte von „rectangle()“ identisch sind mit den Werten für „rect()“ bei der alten „clip“-Eigenschaft, definieren die letzte beiden optionalen Werte die Radien für abgerundete Ecken – jeweils für den horizontalen und vertikalen Radius. Für einen Kreis erwartet „circle()“ drei Werte – die X- und Y-Koordinaten für den Mittelpunkt sowie einen Radius:

img {
  clip-path: circle(100px, 100px, 50px);
}

Ein Polygon („polygon()“) erlaubt beliebig viele Koordinatenpaare (X- und Y-Koordinaten) zur Definition aufwändiger Formen.

Komplexe Maskierungen mit SVG-Grafiken

Auch deutlich komplexere Maskierungen sind mit „clip-path“ möglich. Dazu werden die Koordinaten nicht direkt in die CSS-Eigenschaft geschrieben, was immer nur die Verwendung einer der vier Grundformen erlaubt, sondern in eine SVG-Grafik ausgelagert. Die SVG-Grafik wird dazu mit Angabe einer ID im HTML-Dokument platziert:

<svg>
  <defs>
    <clipPath id="form">
      <circle cx="100" cy="100" r="50" />
    </clipPath>
  </defs>
</svg>

Anschließend wird der CSS-Eigenschaft „clip-path“ die ID des SVG-Pfades übergeben:

img {
  clip-path: url(#form);
}

Browserunterstützung

Die aktuellen Versionen von Chrome, Safari und Chrome können die „clip-path“-Eigenschaft interpretieren, der aktuelle Internet Explorer nicht. In jedem Fall setzen die Browser derzeit noch die Verwendung des jeweiligen Vendor-Prefixes voraus.

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Tags: , ,

2 Kommentare zu „CSS3: Komplexe Beschneidungspfade mit der Eigenschaft Clip-Path
  1. ati am 17. Juni 2013 um 19:12

    “Die aktuellen Versionen von Chrome, Safari und Chrome …”
    Hmmm, Firefox? ;-)

    • Denis Potschien am 18. Juni 2013 um 11:44

      Ja, ein Chrome genügt :-) Der Firefox sollte natürlich noch gemeint sein.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!