CSS, HTML & Javascript mit {stil}

CSS clip-path: url() / clip-path: path()

CSS clip-path: url() und clip-path: path() stellen Elemente / Bilder anhand eines beliebig komplexen Pfads mit harten / scharfen Konturen frei. Die Form kann animiert werden. Alles außerhalb der Form wird nicht angezeigt, aber die Elemente bleiben erhalten, denn clip-path ist »nicht-destruktiv«.

CSS clip-path: Bilder mit transparentem Hintergrund

clip-path: Bilder ohne Hintergrund: Freistellen / Beschneiden beliebiger Formen

So werden Bilder nicht-destruktiv ohne Hintergrund gezeigt. D.h., das Bild muss nicht im Bildbearbeitungsprogramm bearbeitet und als WebP, PNG oder GIF mit Alpha-Kanal gespeichert werden, sondern bleibt vollständig erhalten. Der Pfad wird in SVG als clipPath angelegt und in CSS als clip-path: url(#path) aufgerufen – ähnlich wie clip-path: polygon(), das aber auf gerade Kanten eingeschränkt ist.

Komplexe Formen mit geraden Kanten und runden Bögen wie Herzen, Tropfen, Blätter oder eine Mondsichel entstehen mit der URL (Adresse) eines SVG-Pfades.

<img width="640" height="640" 
   src="sonne.webp" alt="…" class="raute" 
	srcset="sonne.webp 420w, 
			sonne.webp 640w" 
	sizes="(max-width: 420px) 100vw, 640px">

<img width="640" height="640" 
   src="mond.webp" alt="…" class="mond" 
	srcset="mond.webp 420w, 
			mond.webp 640w" 
	sizes="(max-width: 420px) 100vw, 640px">
Freisteller Raute
.raute {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
Freisteller Form von Mond
.mond {
clip-path: url(#mond);
}

Für clip-path: polygon() reicht CSS clip-path, aber für die runden Bögen ist ein SVG clipPath verantwortlich, der als clip-path: url() ins CSS übernommen wird.

<svg  width="0" height="0" viewBox="0 0 100 100">
<clipPath id="mond" clipPathUnits="objectBoundingBox">
	<path transform="scale(0.01, 0.01)" 
	      d="m56.5 2.3a48.15 48.15 0 0 0-48.1…4.7z"/>
</clipPath>

clip-path: url(#id) setzt den SVG-clipPath als CSS-Eigenschaft in ein HTML-Element.

SVG clipPath an CSS clip-path anpassen

SVG-Pfade werden fast immer in einem grafische SVG-Editor wie Illustrator, Affinity Design oder Inkscape angelegt. Die Grafikprogramme legen die Koordinaten der Punkte so wie in diesem Beispiel in absoluten Werten an, aber für CSS werden relative Werte benötigt.

Das Attribut clipPathUnits="objectBoundingBox" des SVG clipPath-Elements passt den clipPath an das beschnittene Objekt an. Für objectBoundingBox müssen die Werte des Pfads zwischen 0 und 1 liegen. Darum ist der Pfad in diesem Beispiel transformiert. Die Werte für transform="scale()" werden einfach aus der Breite und Höhe der viewBox entwickelt:

1/100 = 0.01
1/100 = 0.01

Reiner CSS clip-path: path()

Eine jüngere Variante vereinfacht das Einsetzen eines clip-path mittels CSS: Anstelle der Referenz auf einen SVG-Pfad, der mit clipPath definiert ist, tritt die CSS-Funktion path(). Damit kann der Vektor für den Pfad direkt eingegeben werden und der Umweg über SVG clipPath wird nicht mehr benötigt.

Der Pfad ist eine einfache Zeichenkette, die mit M beginnt und mit Z endet, und legt die Punkte als kommagetrennte Wertpaare x,y an. Im Vergleich zu clip-path: url() muss der Beschneidungspfad einige Einschränkungen hinnehmen: Die Punkte sind absolute Pixelwerte (px) und der Pfad kann nicht durch die var()-Funktion beschrieben werden.

<img class="path" width="320" height="320" 
	src="mond.webp" alt="">
Animierte Form eines Tores 
.path {
	max-width: 100%;
	height: auto;
	clip-path: path("m 125,134 c 0,0 10,-27 35,-27 25,0 35,27 35,27 v 77 h -70 z");
	animation: morph 10s infinite;
}

@keyframes morph {
	0% {
		clip-path: path("m 125,134 c 0,0 9.94191,-27 35,-27 25,0 35,27.542 35,27 v 77 h -70 z");
	}
	
	100% {
		clip-path: path("m 55,84 c 0,0 29,-82 104,-82 74,0 104,82 104,82 V 317 H 55 Z")
	}
}

Diese Variante kommt insbesondere der Animation des clip-path entgegen, denn sie spart das SVG-Element.

CSS clip-path shape()

shape() ist eine neue, erweiterbare Syntax für das clip-path-Attribut, mit dem komplexere Formen und neue Geometrie-Typen möglich werden. – vergleichbar mit paint() oder image().

und als er aufschaute befand er sich ein einem blauen Kreis aus reinem CSS.

Klassisch mit clip-path: circle sieht das wie folgt aus:

clip-path: circle(50% at center);

Mit der neuen CSS-Funktion shape() entsteht derselbe Kreis:

clip-path: shape(circle(50% at center));

Das sieht auf den ersten Blick einfach nur komplizierter aus, obwohl es denselben Kreis erzeugen würde.

Einen SVG-Pfad können wir bereits als clip-path einsetzen. Aber wer kann die Folge von Ziffern und Buchstaben erklären, geschweige denn eine Form in dieser Weise diktieren? Die CSS-Variante soll durch eine »sprechende« Notation einfacher zu lesen und einfacher einzusetzen sein. curve() wäre dann z.B. eine Funktion zur Definition geschwungener Pfade – ähnlich wie Bézier-Kurven in SVG.

.clipped {
	background: orange;
	width: 100px; height: 200px;
	clip-path: path("M 37,1 A 36,36 0 0 0 1,37 36,36 0 0 0 37,73 36,36 0 0 0 49,71 36,36 0 0 1 25,37 36,36 0 0 1 49,3 36,36 0 0 0 37,1 Z");
}

clip-path: shape(curve(
  move-to(10% 10%),
  bezier-to(30% 20%, 70% 80%, 90% 90%)
));
  • move-to(x y): bewegt den Zeichenstift an den Startpunkt
  • bezier-to(cp1x cpy1, cp2x cpy2, x y): beschreibt eine kubische Bézier-Kurve
Suchen auf mediaevent.de