CSS clip path


CSS clip path ist eine CSS-Eigenschaft, mit deren Hilfe ein Schnittbereich für ein CSS-Element definiert werden kann. Auf diese Weise ermöglicht CSS clip path, Elemente in vielen verschiedenen geometrischen Formen anzuzeigen, ohne dass die Grafik-Datei zuvor bearbeitet werden muss. Die Grundformen werden Scalable-Vector-Graphic (SVG) angelegt.

Hintergrund

Ursprünglich konnten mit CSS nur rechteckige Elemente angelegt werden. Dies hatte zur Folge, dass die Anzeige von CSS-Elementen über einen Browser immer nur geometrisch ähnliche Formen ergab. Über die Eigenschaft „border-radius“ konnten in der Zwischenzeit Elemente mit abgerundeten Ecken auf Websites eingeblendet werden, doch individuelle Formen waren nicht möglich. Mit der CSS3 Eigenschaft „clip path“ lassen sich Elemente heute schließlich fast nach Belieben zuschneiden. 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.

Möglichkeiten

Mit CSS clip path können vier Grundformen, also rechteckige, elliptische, runde oder polygonale Formen realisiert werden.

Zwei Beispiele:

  • Rechteck: In diesem Beispiel mit den Maßen 10 mal 50 Pixel werden die Ecken mit jeweils 5 Pixeln (vertikaler und horizontaler Radius) abgerundet.
img {
  clip-path: rectangle(10px, 10px, 50px, 50px, 5px, 5px);
}
  • Kreis: Dieser Kreis wird aus dem Mittelpunkt (100 px für X- und Y-Achse) sowie dem Radius (dritter Wert) gebildet.
img {
  clip-path: circle(100px, 100px, 50px);
}

Im Zusammenspiel mit Maskierungen lassen sich die mit Hilfe von CSS clip path angelegten Formen zusätzlich maskieren. Das Ergebnis sind komplett individuelle Anzeigemöglichkeiten. Um diese zu erzielen, werden die Koordinaten in einer SVG-Grafik abgespeichert, die dann wiederum über eine eigene ID in einem HTML-Dokument implementiert wird. Den Rahmen bildet dann das entsprechende clip-path-Element.

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

Und hier als ID übergeben.

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

Mit Hilfe von Maskierungen kann zudem auch die Transparenz der Farben definiert werden. Ein Beispiel für eine individuelle Form mit entsprechenden Codes findet sich hier [1]

Nutzen für SEO

Mit Hilfe von CSS clip path lassen sich individuelle Formen von Grafiken realisieren, ohne dass dafür eine Grafikdatei zugeschnitten werden muss. Dies könnte den Vorteil haben, dass die Basis-Grafik selbst problemlos indexiert werden kann. Vielfältigere Möglichkeiten im Webdesign sorgen zudem dafür, dass eine Website unterscheidbarer wird und ihre Optik zu einem Alleinstellungsmerkmal werden kann. Der große Vorteil von clip path besteht darin, dass die Technik hervorragend für Responsive Webdesign im Rahmen der Mobile Optimierung verwendet werden kann. Denn Einheiten können relativ, zum Beispiel in Prozent angegeben werden. Zugleich lässt sich die Technik mit Hilfe der Grundformen einfach handhaben. Bis dato wird CSS clip path in Verbindung mit einer SVG-Maske nur von Firefox unterstützt, während Chrome die geometrischen Grundformen erkennt. Nutzer des Internet Explorer erhalten weder die eine noch die andere Variante.

Einzelnachweise

  1. CSS clip path url with SVG clipPath codepen.io Abgerufen am 23.09.2015

Weblinks