CSS clip path

Was ist ein CSS clip path?

Mit Hilfe des CSS clip path kann ein Schnittbereich für ein CSS Element definiert werden. Es handelt sich dabei um eine CSS Eigenschaft, die es ermöglicht, Elemente in sehr unterschiedlichen geometrischen Formen darzustellen. Dabei muss die Grafikdatei nicht im Voraus bearbeitet werden. Die Basisformen, die durch diese Technik erzeugt werden, bezeichnet man als Scalable-Vector-Graphic (kurz: SVG).

Allgemeines zu CSS clip path

Ursprünglich war es mit der CSS Technik nur möglich, rechteckige Formen zu erzeugen. CSS Elemente wurden daher in allen Browsern immer sehr ähnlich dargestellt. Es entstanden immer geometrisch ähnliche Formen. Der nächste Schritt war die Möglichkeit, über den Punkt “border-radius” die Ecken der rechteckigen Elemente jeweils abzurunden und diese Rundung zu definieren. Dadurch entstanden Elemente mit ohne scharfkantige Ecken, die jedoch noch immer vorwiegend rechteckig oder eben rund waren. Individuell gestaltete Formen waren über CSS nicht darstellbar.
Heute ist dies jedoch dank der CSS3 Eigenschaft namens clip path möglich. Elemente lassen sich nunmehr eigentlich beliebig formen. Um nun individuell gestaltete Formelemente zu erzeugen, ist eine komplexere Beschneidung der Elemente nötig, als die über die “border-radius”-Eigenschaft. Dank der CSS3 Eigenschaft CSS clip path sind diese Beschneidungen erstellbar und können über die SVG Grafik erzeugt werden.

Gestaltungsmöglichkeiten
Gestaltung von CSS Elementen

Mit der neuen Version des CSS clip path haben Webseitenbetreiber und -gestalter die Möglichkeit, rechteckige, runde, ovale und mehreckige Formen zu erstellen. Ein Rechteck mit abgerundeten Ecken lässt sich über die Angabe von bestimmten Pixelzahlen ein vertikaler und ein horizontaler Radius angeben. Für ein Rechteck, das 20 mal 30 Pixel groß ist und abgerundete Ecken mit 3 Pixeln haben soll, sieht der CSS clip path folgendermaßen aus: clip-path: rectangle (20px, 20px, 30px, 30px, 3px, 3px). Für eine runde Form müssen X-Achse, Y-Achse und Radius angegeben werden. Ein Kreis von 50 Pixeln hätte demnach den CSS clip path: circle (50px, 50px, 25px).
Eine weitere Gestaltungsmöglichkeit ist die Maskierung. Man kann in CSS clip path Formen anlegen, maskiert sind. So entstehen je nach Wunsch vollkommen frei gestaltete Formen, die ganz persönlich geformte Anzeigen ermöglichen. Dazu müssen die Koordinaten in einer SVG Grafik verankert und gespeichert werden. Diese SVG Grafik wird ihrerseits mit einer ID versehen und im entsprechenden HTML Dokument eingefügt. Als Rahmen für die Anzeige können wiederum CSS clip path Elemente genutzt werden. Maskierungen können auch verwendet werden, um verschiedene Elemente mit transparenten oder halbtransparenten Farben zu hinterlegen.

Formen und Elemente, die mit CSS clip path erstellt wurden, eignen sich besonders gut für die Gestaltung von Mobilversionen von Webseiten, weil sie nicht nur in Pixeln, sondern auch in Prozent angegeben werden können. Dadurch entsteht die Möglichkeit, eine Anzeige immer genau so zu gestalten, dass die 10 oder 30 oder 50% einer dargestellten Webseite einnimmt, unabhängig davon, wie groß der Bildschirm gerade ist.
Es gibt auf dem Markt verschiedene Clip Path Maker. Diese Programme erlauben das schnelle und einfache Erstellen von hochkomplexen Formen oder einfachen Grundformen. Auch Animationen lassen sich durch das Zusammenstellen und Übereinanderlegen von einzelnen Formen kreieren. Die Programme sind online frei zugänglich oder können auch auf den eigenen Rechner geladen werden.

Bedeutung für Suchmaschinenoptimierung

Da für die Grafiken und Formen, die mit Hilfe eines CSS clip path erstellt werden, keine eigentlichen Grafikdateien verwendet werden, ist es leichter, die Basis-Grafik indexieren zu lassen. Diese Basisgrafik wird nicht zugeschnitten und kann daher selbst als Element indexiert und gefunden werden. Dies ist ein Vorteil für die Suchmaschinenoptimierung.
Im Webdesign ergeben sich durch die Technik des CSS clip path viele verschiedene Möglichkeiten, Webseiten individueller zu gestalten, als dies über simple rechteckige Grafiken und Formen möglich wäre. Der Fantasie sind im Grunde keine Grenzen mehr gesetzt und es lassen sich die kreativsten Formen in allen möglichen Farben und Ausformungen erstellen. Dadurch wird eine Webseite individueller, persönlicher und vor allem für Suchmaschinenbots unterscheidbarer von anderen Webseiten. Die optische Gestaltung wird zu einem Alleinstellungsmerkmal, das die Webseite nicht nur für den Betrachter, sondern auch für die Suchmaschinenalgorithmen auffälliger und unverwechselbar macht. Hiermit sind bessere Rankings möglich als mit der Verwendung von Standart-Gestaltungselementen, wie sie auf jeder beliebigen Webseite eingesetzt werden und daher im Netz so oder so ähnlich tausendfach vorkommen.

Optimierung für mobile Geräte

Ein weiterer Vorteil von CSS clip path liegt in seiner Eignung für Responsive Webdesign und zwar im Besonderen für die mobile Optimierung von Webseiten. Die verschiedenen Elemente können nämlich unter anderem in Prozent angegeben werden, also in einer Relation zur dargestellten Größe einer Webseite. Die Technik umfasst die Grundformen, welche einfach zu handeln sind und zudem individuell angepasst werden können, je nachdem, wie viel Zeit ein Seitendesigner hinein stecken will, um die Individualisierung der Webseite und der einzelnen Anzeigen voran zu treiben.
Leider wird die Technologie der CSS clip paths bisher nur von Firefox unterstützt, und zwar zusammen mit einer SVG Maske. Google Chrome erkennt immerhin die geometrischen Grundformen. Wer allerdings mit dem Internet Explorer online geht, der erhält weder die eine noch die andere Variante und erkennt die Grafiken nicht entsprechend. Dies muss bei der Suchmaschinenoptimierung beachtet werden.

Sie haben noch Fragen?

Kontaktieren Sie uns