Masken und Beschneidungen/clip-path
Oft möchte man bei Grafiken nur einen bestimmten Bildausschnitt darstellen. Die konventionelle Vorgehensweise war bisher, die Grafik in einem Bildbearbeitungsprogramm zuzuschneiden oder mit einem (teil)transparenten Hintergrund als gif oder png abzuspeichern.
Mit dem CSS Masking Module ist dies nun direkt im Browser möglich:
Inhaltsverzeichnis
clip
Die CSS-Eigenschaft clip ermöglicht es, den Anzeigebereich eines absolut positionierten Elementes rechteckig zu beschneiden.
Sie erwartet als Wert eine der Angaben
-
auto
, Voreinstellung, keine Beschneidung des Anzeigebereiches - die
rect()
-Funktion definiert ein Beschneidungsrechteck- 4 Angaben, um wieviel die Seiten eingerückt werden sollen. Das können Längenangaben sein oder das Schlüsselwort
auto
. Die Spezifikation empfiehlt, die Werte lediglich durch Leerstellen voneinander zu trennen. Sie können aber auch Kommas setzen (dann aber zwischen allen Werten).
- 4 Angaben, um wieviel die Seiten eingerückt werden sollen. Das können Längenangaben sein oder das Schlüsselwort
Die Angaben clip: auto;
und clip: rect(auto auto auto auto);
erzeugen dabei unterschiedliche Darstellungen.
img {
position: absolute;
overflow: hidden;
clip: rect(105px 175px 155px 105px);
transition: all 0.6s ease-in-out;
}
img:hover {
clip: rect(0px 250px 333px 0px);
}
In diesem Beispiel wird ein Bild dargestellt und auf einen kleinen Ausschnitt zugeschnitten. Mittels der Pseudoklasse :hover
wird der Ausschnitt auf gesamte Bild aufgezogen.
:hover
zunächst nur über dem Ausschnitt wirkt.Achtung!
clip
ist als "veraltet" bzw. "abgekündigt" (deprecated) eingestuft. Sie sollte bei neuen Projekten nicht verwendet und bei Bearbeitungen ersetzt werden. Die Masking-Spezifikation verlangt allerdings bislang noch, dass die Browser die Eigenschaft implementieren müssen.In der CSS3-Spezifikation „CSS Masking Level 1“ wird die Clip-Eigenschaft durch clip-path ersetzt.
clip-path
Die CSS-Eigenschaft clip-path ermöglicht es, festzulegen, dass nicht die gesamte Box des Elementes dargestellt wird.[1] Dabei sind, anders als bei der Vorgänger-Eigenschaft clip, auch andere Formen als Rechtecke möglich. Diese Beschneidungspfade werden als Grundformen oder SVG-Grafik definiert. Dabei sind aber nur scharfe Kanten möglich, weiche Übergänge können Sie mit mask-image erreichen.
clip-path: circle(50%, 50%, 50%);
finden, dann ist dieser Code veraltet. Code nach der neuen, gültigen Spezifikation kann man durch
clip-path: circle(50% at 50% 50%);
erkennen.
Grundformen (basic shapes)
Als Wert für die clip-path-Eigenschaft können Sie Grundformen festlegen. Die Bemaßungen dieser Grundformen beziehen sich auf eine so genannte Referenzbox, bei der es sich standardmäßig um die Außenkante der Elementumrandung (border bzw. stroke) handelt.
Folgende Angaben sind möglich:
-
none
: (Standardwert) Bild wird nicht zugeschnitten, sondern normal dargestellt
-
inset()
: legt als Beschneidungskontur ein Rechteck fest. Im Gegensatz zurrect()
-Funktion geben die Argumente fürinset()
an, welchen Abstand die Kante des Beschneidungsrechtecks von der entsprechenden Kante der Referenzbox haben soll.- 1-4 Längenangaben oder Prozentangaben, um wieviel die Seiten eingerückt werden sollen. Werden weniger als 4 Werte notiert, erfolgt die Zuordnung der fehlenden Werte analog zur margin-Eigenschaft.
- optional kann das Schlüsselwort
round
und 1-4 Werte für Eckradien folgen, analog zur Eigenschaft border-radius. - Sind die Eckradien so groß, dass sich die Abrundungen überschneiden würden, werden ihre Werte proportional so weit verkleinert, dass die Überschneidung nicht mehr vorkommt.
-
rect()
: (experimentell) legt als Beschneidungskontur ein Rechteck so wie in der clip-Eigenschaft fest. Eine Angabe von Eckradien ist möglich.
-
xywh()
: (experimentell) legt als Beschneidungskontur ein Rechteck fest, wie man es mit einem<rect>
-Element in SVG tun würde: x und y Koordinate der oberen linken Ecke sowie Breite und Höhe. Eine Angabe von Eckradien ist möglich.
-
circle()
: legt als Beschneidungskontur einen Kreis fest- eine optionale Angabe für den Kreisradius. Das kann eine Längenangabe, eine SVG-Prozentangabe oder eins der Schlüsselwörter
closest-side
oderfarthest-side
sein.-
closest-side
bedeutet, dass der Kreisradius dem Abstand vom Kreismittelpunkt zur nächstgelegenen Kante der Referenzbox sein soll, undfarthest-side
meint den Abstand zur am weitesten entfernten Kante der Referenzbox. -
closest-side
ist der Standardwert.
-
- optional gefolgt vom Schlüsselwort
at
und zwei Angaben für die x- und y-Koordinaten des Kreismittelpunkts. Dies können Längenangaben, SVG-Prozentangaben oder die Schlüsselwörtertop
,bottom
,left
,right
undcenter
sein, so wie in der CSS Eigenschaft background-position definiert. Standardwertcenter
.
- eine optionale Angabe für den Kreisradius. Das kann eine Längenangabe, eine SVG-Prozentangabe oder eins der Schlüsselwörter
-
ellipse()
: legt als Beschneidungskontur eine Ellipse fest- 2 Angaben für den x- und y-Radius der Ellipse. Im Übrigen gelten die gleichen Hinweise wie bei
circle()
. - optional gefolgt vom Schlüsselwort
at
und zwei Angaben für die x- und y-Koordinaten des Kreismittelpunkts, so wie beicircle()
.
- 2 Angaben für den x- und y-Radius der Ellipse. Im Übrigen gelten die gleichen Hinweise wie bei
-
polygon
: legt als Beschneidungskontur ein Polygon (Vieleck) fest- optional kann als erstes Argument eine fill-rule angegeben werden.
- beliebig viele, durch Komma getrennte Koordinatenpaare. Das Polygon wird automatisch durch eine Verbindungslinie vom letzten zum ersten Koordinatenpaar geschlossen.
-
path()
: legt als Beschneidungskontur einen SVG-Pfad fest
.clip-rect {
-webkit-clip-path: inset(80px 110px 190px 90px round 5px);
clip-path: inset(80px 110px 190px 90px round 5px);
}
.clip-circle {
clip-path: circle(100px at 105px 100px);
}
.clip-ellipse {
clip-path: ellipse(90px 140px at 125px 140px);
}
.clip-poly {
clip-path: polygon(75px 150px, -4px 150px, 60px 203px, 26px 288px, 120px 248px, 206px 298px,
177px 211px, 239px 150px, 158px 150px, 122px 36px, 77px 150px);
}
img:hover {
clip-path: none;
}
Referenz-Box des Zuschneide-Pfads
Diese Angaben können durch die optionale Angabe der Geometrie-Box, in dem das Zuschneiden stattfinden soll, erweitert werden. Diese Geometrie-Box wird nur für CSS-Formen als Zuschneidepfade festgelegt. Das Element clipPath in SVG verwendet die border box des HTML-Elements als Referenz.
Wenn das zugeschnittene Element ein HTML-Element ist sind folgende Schlüsselwerte möglich:
-
margin-box
-
border-box
-
padding-box
-
content-box
Wenn die Grundformen mit clip-path auf ein SVG-Element angewandt werden, kann die Geometriebox folgende Werte annehmen:
-
fill-box
-
stroke-box
-
view-box
– falls keineviewBox
festgelegt ist, wird die nächstgelegene Viewbox verwendet. Falls eine ViewBox festgelegt ist, wird das Koordinatensystem dieser ViewBox verwendet.
path()-Funktion
Wie der Name der CSS-Eigenschaft schon aussagt, können als Beschneideform auch komplexere Pfadangaben innerhalb einer CSS-Funktion notiert werden. (Ein Beschneiden durch einen Kreis oder Oval könnte man mit border-radius ja leichter erreichen.)[2] [3]
Pfade haben gegenüber den oben vorgestellten Polygonen viele Vorteile:
- Anstelle absolut positionierter Punkte, kann ein Ausgangspunkt (
m x,y
) definiert und von da an relativ positioniert werden, was spätere Verschiebungen erleichtert. - Es können zusätzlich zu Geraden auch Bögen und Kurven verwendet werden.
.star {
-webkit-clip-path: path('m 40,225 l 75-225 l75,225 l-190-140 h 235');
clip-path: path('m 40,225 l 75-225 l75,225 l-190-140 h 235');
}
.heart {
clip-path: path('m 125,225 l -100,-100 a 50,50 90 0,1 100,-75 a 50,50 90 0,1 100,75 z');
}
.beziergon {
clip-path: path('m 5,30 c80,-80 160,80 230,-20 c-40,80 40,160 0,220 c-80,60 -140,-80 -220,10 c-50,-80 60,-140 -10-210');
}
img:hover {
clip-path: none;
}
Referenzieren einer SVG-Grafik
Alternativ können Sie ein SVG-clipPath-Element mit polygonalen Koordinaten definieren und über CSS einbinden. Sara Soueidan zeigt viele Beispiele und Anregungen, wie Bilder und selbst Texte als Formen zum Zuschneiden von Bildern verwendet werden können.[4]
.clip-poly{
-webkit-clip-path: url("#clipPolygon");
clip-path: url("#clipPolygon");
}
<img class="clip-poly" src="Celsius.jpg" alt="Anders Celsius">
<svg width="0" height="0">
<clipPath id="clipPolygon">
<polygon points="75 150,0 150,60 203,26 288,120 248,206 298,177 211,239 150,158 150,122 36,77 150">
</polygon>
</clipPath>
</svg>
<clipPath>
-Element keine clipPathUnits
-Angabe gemacht worden, deshalb wird der Defaultwert userSpaceOnUse
verwendet und der Stern skaliert nicht mit der Bildgröße. Eine Maske, die mit der Bildgröße skaliert, erhalten Sie durch das Attribut clipPathUnits="objectBoundingBox"
am <clipPath>
-Element. Sie zeichnen dann allerdings in einer "0 0 1 1" Viewbox und der clipPath wird stets auf die volle Bildgröße skaliert.Anwendungsbeispiel
Zusammenspiel von clip-path und shape-outside
In diesem Beispiel wird ein Bild mit clip-path beschnitten und der Text umfließt dann das beschnittene Bild durch eine Festlegung mit shape-outside.
img {
float: left;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%, 0% 0%);
shape-outside: polygon(0% 0%, 100% 50%, 0% 100%, 0% 0%);
}
img:hover {
shape-outside:polygon(0% 0%, 100% 0, 0% 100%, 0% 0%);
clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 0%);
}
Animationen
Es ist möglich, die clip-path-Eigenschaft mit CSS-Animation zu animieren.[5]
Im Shape-Morphing-Tutorial gibt es ein Beispiel, wie Buttons andere Formen annehmen können.
Browsersupport
Achtung!
clip-path
ist derzeit (Stand: Februar 2021) nur in den Browser Firefox implementiert, deshalb muss man proprietäre Eigenschaften verwenden.
für Chrome, Edge, Opera und Safari
-
-webkit-clip-path
Weblinks
- ↑ W3C: the clip-path property
- ↑ css-tricks: The CSS clip-path: path() function ships in Chrome 05.02.2021
- ↑ css-tricks: An Initial Implementation of clip-path: path();
- ↑ Sara Soueidan Clipping in CSS and SVG – The clip-path Property
- ↑ css-tricks: Animating with Clip-Path mit vielen guten Beispielen!
Generator
- cssplant.com: clip-path-generator zur Erzeugung von Polygonen
Artikel
- css-tricks: clip-path
- sitepoint: Introducing the CSS clip-path Property vom 02.06.2016
Siehe auch
Referenz:
clip-path
festgelegte Bildausschnitt sowie der mitshape-outside
definierte Textumfluss.