In CSS mit clip-path Elemente zuschneiden
Zugeschnittene Elemente können auf Websites für einen schönen Effekt sorgen. Bereits vor CSS3 gab es hierfür die Eigenschaft clip, die ab CSS3 als deprecated eingestuft wird. Außerdem konnten mit clip nur rechteckige Zuschnitte durchgeführt werden und das Element musste absolut positioniert sein. Ab CSS3 steht den Entwicklern die überarbeitete Version clip-path zur Verfügung. Der Funktionsumfang ist bei clip-path wesentlich umfangreicher als bei clip. Außerdem kann die Eigenschaft auf alle Elemente angewendet werden und nicht nur auf absolut positionierte, wie das bei clip der Fall ist.
Die Eigenschaft clip-path kann nicht nur auf Bilder angewendet werden, sondern auf alle Elemente. Die ausgeschnittenen Bereiche eines Elements werden mit dem Hintergrund des Elternelements angezeigt. Um die Form des Zuschnitts festzulegen, wird der Wert für die Eigenschaft über eine Funktion mit runden Klammern angegeben, z.B. circle(....); für einen Kreis. Innerhalb der runden Klammern erfolgt die Angabe der Maße, die für die Berechnung des Zuschnitts erforderlich sind. Nachfolgend ist die Syntax anhand eines Beispiels abgebildet.
Werte für die Eigenschaft clip-path
Browser-Präfix für clip-path
Gemäß dem Stand von 07/2015 benötigen die meisten Browser einen Präfix mit -webkit-, sodass die Eigenschaft in der Form -webkit-clip-path angegeben werden muss, damit die Elemente zugeschnitten werden können. In Firefox 38 wurde nur die Syntax mit dem Wert url(...); unterstützt. Im Internet Explorer und Opera Mini 8 zeigte die Eigenschaft keinen Effekt.
Rechteck zuschneiden
Wenn man ein Rechteck zuschneiden möchte, verwendet man als Wert inset(...); und gibt innerhalb der runden Klammern die einzelnen Maße an. Es können bis zu vier Angaben gemacht werden, die mit einem Leerzeichen voneinander getrennt werden. Dabei wird mit dem Zuschnitt oben begonnen und im Uhrzeigersinn die übrigen Maße für rechts, unten und links angegeben.
Es können auch weniger als vier Werte angegeben werden. Bei 3 oder 2 Werten gilt der 2. Wert für links und rechts. Bei 2 Werten gilt der 1. Wert für oben und unten. Bei einem Wert gilt die Angabe für alle vier Seiten. Nachfolgend ist ein Beispielcode in CSS und HTML für den Zuschnitt von 4 Bildern, mit jeweils einer anderen Anzahl an Werten. Die Bilder sind in DIV-Containern untergebracht, die mit einer Hintergrundfarbe versehen sind, damit der Effekt der Zuschnitte besser sichtbar ist.
/* Mit 4 Werten */
.selektor4 {
-webkit-clip-path: inset(15px 20px 25px 30px);
clip-path: inset(15px 20px 25px 30px);
}
/* Mit 3 Werten */
.selektor3 {
-webkit-clip-path: inset(15px 20px 25px);
clip-path: inset(15px 20px 25px);
}
/* Mit 2 Werten */
.selektor2 {
-webkit-clip-path: inset(15px 20px);
clip-path: inset(15px 20px);
}
/* Mit 1 Wert */
.selektor1 {
-webkit-clip-path: inset(15px);
clip-path: inset(15px);
}
div {
margin: 5px;
height: 120px;
float: left;
background-color: #9999cc;
}<div>
<img src="bild.jpg">
</div>
<div>
<img src="bild.jpg" class="selektor4">
</div>
<div>
<img src="bild.jpg" class="selektor3">
</div>
<div>
<img src="bild.jpg" class="selektor2">
</div>
<div>
<img src="bild.jpg" class="selektor1">
</div>Der Effekt bei dem Code ist auf der nachfolgenden Abbildung ersichtlich. Die Nummern auf den Bildern signalisieren, welche Stelle aus den Werteangaben zur Anwendung kommen.
Rechteck mit abgerundeten Ecken zuschneiden
Ein Rechteck kann auch mit abgerundeten Ecken zugeschnitten werden. Hierfür verwendet man als Wert ebenfalls inset(...);. Die Werte werden lediglich mit round erweitert, um die Radien für die einzelnen Ecken anzugeben. Auch hierbei ist die Angabe von bis zu vier Werten möglich. Dabei beginnt man mit der oberen, linken Ecke und gibt im Uhrzeigersinn die Werte für die übrigen Ecken mit einem Leerzeichen getrennt an. Die Syntax ist nachfolgend anhand eines Beispiels abgebildet.
Wenn für die abgerundeten Ecken 3 oder 2 Werte angegeben worden sind, gilt der 2. Wert für oben rechts und unten links. Bei nur 2 Werten gilt der 1. Wert für oben links und unten rechts. Bei nur einem Wert gilt der Wert für alle vier Ecken. Nachfolgend ist ein Beispielcode in CSS und HTML mit jeweils einer anderen Anzahl an Werten für round. Der Einfachheit halber wurde für den Zuschnitt nur 1 Wert mit 15px verwendet, der für alle vier Seiten gilt und bei Bedarf natürlich auch erweitert werden kann.
/* Mit 4 Werten */
.selektor4 {
-webkit-clip-path: inset(15px round 5px 10px 15px 20px);
clip-path: inset(15px round 5px 10px 15px 20px);
}
/* Mit 3 Werten */
.selektor3 {
-webkit-clip-path: inset(15px round 5px 10px 20px);
clip-path: inset(15px round 5px 10px 20px);
}
/* Mit 2 Werten */
.selektor2 {
-webkit-clip-path: inset(15px round 10px 20px);
clip-path: inset(15px round 10px 20px);
}
/* Mit 1 Wert */
.selektor1 {
-webkit-clip-path: inset(15px round 20px);
clip-path: inset(15px round 20px);
}
div {
margin: 5px;
height: 120px;
float: left;
background-color: #9999cc;
}<div>
<img src="bild.jpg">
</div>
<div>
<img src="bild.jpg" class="selektor4">
</div>
<div>
<img src="bild.jpg" class="selektor3">
</div>
<div>
<img src="bild.jpg" class="selektor2">
</div>
<div>
<img src="bild.jpg" class="selektor1">
</div>Auf der folgenden Abbildung ist der Effekt mit den abgerundeten Ecken sichtbar.
Kreis zuschneiden
Möchte man einen Kreis zuschneiden, verwendet man circle(...); und gibt den Radius und die Position innerhalb der runden Klammern an. Die erste Angabe ist für den Radius. Die Positionsangaben erfolgen mit dem Wort at. Es sind Angaben für die vertikale und horizontale Position möglich. Die Syntax ist nachfolgend mit einem Beispiel abgebildet.
Die Position kann mit Schlüsselwörtern wie left, bottom, center etc. oder numerisch mit Einheiten angegeben werden. Auch eine Kombination aus beidem ist möglich, z.B. dass man unten links und dazu einen horizontalen und/oder vertikalen Versatz angibt. Nachfolgend sind einige Beispiele in CSS und HTML.
/* Ohne Maße */
.selektor1 {
-webkit-clip-path: circle();
clip-path: circle();
}
/* Zentriert */
.selektor2 {
-webkit-clip-path: circle(40px at center);
clip-path: circle(40px at center);
}
/* Links unten */
.selektor3 {
-webkit-clip-path: circle(40px at left bottom);
clip-path: circle(40px at left bottom);
}
/* Links unten mit 20px horizontalem, 30px vertikalem Versatz */
.selektor4 {
-webkit-clip-path: circle(40px at left 20px bottom 30px);
clip-path: circle(40px at left 20px bottom 30px);
}
div {
margin: 5px;
height: 120px;
float: left;
background-color: #9999cc;
}<div>
<img src="bild.jpg">
</div>
<div>
<img src="bild.jpg" class="selektor1">
</div>
<div>
<img src="bild.jpg" class="selektor2">
</div>
<div>
<img src="bild.jpg" class="selektor3">
</div>
<div>
<img src="bild.jpg" class="selektor4">
</div>Der Effekt aus dem Beispielcode ist wie folgt abgebildet.
Ellipse zuschneiden
Aus einem Element wird eine Ellipse mit ellipse(...); zugeschnitten. Anders als beim Kreis muss man zwei Werte für die Radien angeben. Gibt man nur einen Wert an, erhält man einen kreisförmigen Zuschnitt. Die Positionsangabe erfolgt wie beim Kreis mit Schlüsselwörtern oder numerisch mit Einheiten. Die Syntax ist nachfolgend mit einem Beispiel abgebildet.
Da man mit nur einem Radius ebenfalls einen Kreis zuschneiden kann, könnte man theoretisch auf circle(...); verzichten und die Kreise ebenfalls mit ellipse(); zuschneiden. Nachfolgend sind ein paar Beispiele in CSS und HTML.
/* Nur 1 Radius */
.selektor1 {
-webkit-clip-path: ellipse(60px at center);
clip-path: ellipse(60px at center);
}
/* Zentriert */
.selektor2 {
-webkit-clip-path: ellipse(60px 30px at center);
clip-path: ellipse(60px 30px at center);
}
/* Links unten */
.selektor3 {
-webkit-clip-path: ellipse(60px 30px at left bottom);
clip-path: ellipse(60px 30px at left bottom);
}
/* Links unten mit 20px horizontalem, 30px vertikalem Versatz */
.selektor4 {
-webkit-clip-path: ellipse(60px 30px at left 20px bottom 30px);
clip-path: ellipse(60px 30px at left 20px bottom 30px);
}
div {
margin: 5px;
height: 120px;
float: left;
background-color: #9999cc;
}<div>
<img src="bild.jpg">
</div>
<div>
<img src="bild.jpg" class="selektor1">
</div>
<div>
<img src="bild.jpg" class="selektor2">
</div>
<div>
<img src="bild.jpg" class="selektor3">
</div>
<div>
<img src="bild.jpg" class="selektor4">
</div>Die Beispielcodes würden im Browser folgendes bewirken.
Freier Zuschnitt mit Koordinatenpunkten
Neben den Grundformen Kreis, Rechteck und Ellipse kann man auch komplizierte Zuschnitte durchführen, indem man die Koordinatenpunkte mit polygon(...); angibt. Jedes Koordinatenpaar wird mit einem Komma abgeschlossen und besteht dabei aus einem x- und y-Koordinaten. Man benötigt mindestens 3 Koordinatenpaare, da man bei nur 2 Koordinatenpunkten lediglich eine Linie hätte und keine Fläche. Die Syntax ist nachfolgend mit einem Beispiel abgebildet.
Da man im Grunde sehr viele Koordinatenpaare angeben kann, kann es hierbei auch zu Überschneidungen kommen. Ein paar Beispiele mit freien Koordinaten sind nachfolgend aufgeführt, die mit weiteren Punkten erweitert werden könnten.
/* Nur 2 Koordinatenpaare */
.selektor1 {
-webkit-clip-path: polygon(10px 10px, 80px 40px);
clip-path: polygon(10px 10px, 80px 40px);
}
/* 3 Koordinatenpaare */
.selektor2 {
-webkit-clip-path: polygon(10px 10px, 80px 30px, 110px 110px);
clip-path: polygon(10px 10px, 80px 30px, 110px 110px);
}
/* 4 Koordinatenpaare */
.selektor3 {
-webkit-clip-path: polygon(10px 10px, 80px 30px, 110px 110px, 50px 100px);
clip-path: polygon(10px 10px, 80px 30px, 110px 110px, 50px 100px);
}
/* Überschneidung */
.selektor4 {
-webkit-clip-path: polygon(10px 10px, 80px 30px, 110px 110px, 50px 110px, 100px 10px);
clip-path: polygon(10px 10px, 80px 30px, 110px 110px, 50px 100px, 110px 10px);
}
div {
margin: 5px;
height: 120px;
float: left;
background-color: #9999cc;
}<div>
<img src="bild.jpg">
</div>
<div>
<img src="bild.jpg" class="selektor1">
</div>
<div>
<img src="bild.jpg" class="selektor2">
</div>
<div>
<img src="bild.jpg" class="selektor3">
</div>
<div>
<img src="bild.jpg" class="selektor4">
</div>Im Browser würden die Beispielcodes folgendes bewirken.
Zuschnitt über SVG-Grafik
Für komplizierte Zuschnitte kann man auch die Koordinaten einer SVG-Grafik verwenden. Hierbei gibt man die ID der Grafik über url(...); an. Die Syntax ist nachfolgend mit einem Beispiel abgebildet.
Die SVG-Grafik kann dabei inline auf der Website integriert sein oder als Datei bereitliegen. Falls die SVG-Grafik inline integriert ist, entfällt die Angabe des Dateinamens. Nachfolgend ist ein Beispiel, bei dem die Grafik inline eingefügt wurde.
/* ID zur SVG-Grafik */
.selektor1 {
-webkit-clip-path: url(#svggrafik);
clip-path: url(#svggrafik);
}<div>
<img src="bild.jpg" class="selektor1">
</div>
<svg width="0" height="0">
<clipPath id="formid" clipPathUnits="objectBoundingBox">
<polygon points="1.0 0.5, 0.1 0.1, 0.5 0.5, 0.1 0.9" />
</clipPath>
</svg>Im Browser würde sich der Code wie folgt auswirken.
Angabe prozentualer Werte bei responsive Design
Bei Websites mit responsive Designs kann es zu unerwünschten Effekten führen, wenn man die Koordinaten in Pixeln angibt. Man kann die Zuschnitte auch responsive gestalten, indem man prozentuale Angaben macht.