CSS/Tutorials/Masken und Beschneidungen/clip-path

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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:

clip[Bearbeiten]

Die CSS-Eigenschaft clip ermöglicht es, den Anzeigebereich eines absolut positionierten Elementes rechteckig zu beschneiden.

  • Achtung
  • CSS 2.0
  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

Sie erwartet als Wert eine der Angaben

  • auto, Voreinstellung, keine Beschneidung des Anzeigebereiches
  • die rect()-Funktion zeichnet ein Rechteck
    • 4 Angaben um wieviel die Seiten eingerückt werden sollen

Die Angaben clip: auto; und clip: rect(auto, auto, auto, auto); erzeugen dabei unterschiedliche Darstellungen.

rechteckige Beschneidung mit clip ansehen …
img {
  position: absolute;
  overflow: hidden;
  clip: rect(100px, 135px, 125px, 90px);
}
img:hover { 
  clip: auto; 
}

In diesem Beispiel wird ein Bild dargestellt und auf einen kleinen Ausschnitt zugeschnitten. Mittels der Pseudoklasse :hover wird das gesamte Bild sichtbar gemacht.

Beachten Sie, dass nicht nur die Darstellung beeinflusst wird, sondern auch :hover zunächst nur über dem Ausschnitt wirkt.

Achtung!

Die Eigenschaft clip ist als "veraltet" bzw. "abgekündigt" (deprecated) eingestuft. Sie sollte bei neuen Projekten nicht verwendet und bei Bearbeitungen ersetzt werden.
In der CSS3-Spezifikation ist die Clip-Eigenschaft künftig durch clip-path ersetzt worden.

clip-path[Bearbeiten]

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.

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Details: caniuse.com

Der Titel dieses Artikels ist mehrdeutig. Das gleichnamige SVG-Element finden Sie unter: SVG/clipPath.


Hinweis

Wenn Sie im Internet Code-Beispiele mit der Eigenschaft
  • 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)[Bearbeiten]

Als Wert für die clip-path-Eigenschaft können Sie Grundformen festlegen.

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Details: caniuse.com

Folgende Angaben sind möglich:

  • none: (Standardwert) Bild wird nicht zugeschnitten, sondern normal dargestellt
  • inset: zeichnet ein Rechteck
    • 4 Angaben um wieviel die Seiten eingerückt werden sollen,
    • 2 optionale Angaben für einen (horizontalen und vertikalen) border-Radius, eingeleitet durch das Schlüsselwort round
  • circle: zeichnet einen Kreis
    • 1 Angabe für die Größe des Kreisradius
    • das Schlüsselwort at,
    • gefolgt von 2 Angaben für die x- und y-Koordinaten des Mittelpunkts
  • ellipse: zeichnet eine Ellipse
    • 2 Angaben für die Größe der Ellipse
    • das Schlüsselwort at
    • gefolgt von 2 Angaben für die x- und y-Koordinaten des Mittelpunkts
  • polygon: zeichnet ein Vieleck
    • beliebig viele, durch Komma getrennte Koordinatenpaare


Beschneidung mit Grundformen ansehen …
.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[Bearbeiten]

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 keine viewBox festgelegt ist, wird die nächstgelegene Viewbox verwendet. Falls eine ViewBox festgelegt ist, wird das Koordinatensystem dieser ViewBox verwendet.

path()-Funktion[Bearbeiten]

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]

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Leer

Details: caniuse.com

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.
path() als Beschneideform ansehen …
.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[Bearbeiten]

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]

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Details: caniuse.com

Beschneidung durch ein SVG ansehen …
.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>

Anwendungsbeispiel[Bearbeiten]

Zusammenspiel von clip-path und shape-outside[Bearbeiten]

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.

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Details: caniuse.com

CSS-Shape-polygon.png

Beispiel ansehen …
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%);
  }
Wenn Sie mit der Maus über das Bild fahren, verändert sich der mit clip-path festgelegte Bildausschnitt sowie der mit shape-outside definierte Textumfluss.

Animationen[Bearbeiten]

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[Bearbeiten]

Achtung!

Die Eigenschaft 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

Hinweis

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.


Weblinks[Bearbeiten]

  1. W3C: the clip-path property
  2. css-tricks: The CSS clip-path: path() function ships in Chrome 05.02.2021
  3. css-tricks: An Initial Implementation of clip-path: path();
  4. Sara Soueidan Clipping in CSS and SVG – The clip-path Property
  5. css-tricks: Animating with Clip-Path mit vielen guten Beispielen!

Generator


Artikel

Siehe auch[Bearbeiten]

Referenz: