CSS clip und mask – Masken und Freisteller

CSS clip

Freisteller mit einer harten Grenze gibt es in diversen Optionen. Die älteste Version schneidet ein einfaches Rechteck aus einem absolut positionierten Element heraus, aber diese Eigenschaft gilt heute als deprecated (veraltet).

<div class="simple">
	<img class="clip-simple" src="fruchtig1.jpg" width="640" height="425" alt="…">
</div>

.simple {
   position: relative;
   width: 300px;
   aspect-ratio: 246/164;
}

.clip-simple {
   position: absolute;
   clip:rect(20px 260px 180px 50px);
}

@media (min-width: 420px) {
 .simple {
    width: 600px;
 }
 .clip-simple {
   clip:rect(60px 540px 330px 50px);
 }
}

Weil Bilder mit clip: rect() absolut positioniert werden müssen, können keine relativen Werte für den Versatz von oben, rechts unten und links eingesetzt werden, sondern nur absolute Angaben wie px oder rem. Um ein Bild mit clip: rect() angepasst auf unterschiedliche Monitorgrößen bzw. Browserfenster auszuschneiden, müssten also Breakpoints eingesetzt werden.

Mehr zu CSS clip – der ältesten Variante für einfaches Beschneiden

CSS clip-path

clip-path unterstützt Prozentwerte und ist flexibler als das veraltete clip: rect().

<div>
	<img class="modern" decoding="async" src="fruchtig1" width="640" height="424" alt="…">
</div>

.modern {
	clip-path: inset(10% 15% 20% 15%)
}

Mit nur einem Wert ist der Abstand an allen vier Seiten gleich, zwei Werte bestimmen den Abstand vertikal und horizontal, drei Werte regeln von oben, horizontal, unten.

Neben clip-path: inset() für ein Rechteck bietet clip-path weitere Formen:

clip-path: circle(radius at x y),
ellipse (radiusX radiusY at x y)
polygon(x1 y1, x2 y2, … ) (Vieleck)

Mit nur einem Wert ist der Abstand an allen vier Seiten gleich, zwei Werte bestimmen den Abstand vertikal und horizontal, drei Werte regeln von oben, horizontal, unten.

Neben clip-path: inset() für ein Rechteck bietet clip-path weitere Formen: clip-path: circle(radius at x y), ellipse (radiusX radiusY at x y) und ein Vieleck mit polygon(x1 y1, x2 y2, … ).

<div>
	<img class="clip-poly" src="fruchtig.jpg" width="640" height="424" alt="…">
</div>

Mehr zum Freistellen von Formen mit CSS clip-path

CSS clip-path mit SVG <clipPath>

Zu einem SVG-Pfad wird man greifen, wenn komplexere Formen oder Animationen gefragt sind: Mit reinem CSS sind Formen wie das Herz nicht machbar, sondern hier muss sich SVG mit hinzugesellen.

<img class="clip-svg" src="fruchtig.jpg" width="640" height="424" alt="…">

.clip-svg {
	clip-path: url(#herz)
}

<svg width="0" height="0" viewBox="0 0 0 0">
<clipPath id="herz" clipPathUnits="objectBoundingBox">
	<path transform="scale(0.0066 0.0072)" d="m43.16 0c-23.83- … -0.40256z" />
</clipPath>
</svg>

Position und Abmessungen des clipPath sind entweder absolute oder relative Werte. clipPathUnits legt das Koordinatensystem des clipPath fest.

userSpaceOnUse – die Koordinaten der SVG-Zeichnung
objectBoundingBox … die Koordinaten eines Objekts

Mehr zum Freistellen anhand eines SVG-Pfads mit CSS clip-path und SVG clipPath

CSS background-clip

Hintergrundbilder werden mit background-clip beschnitten.

<div class="text-clip">Feine Früchte</div>

.text-clip {
  font-size: 120px;
  background-image: url('fruchtig.jpg');
  background-size: cover;
  background-clip: text;
  color: transparent;
}

Mehr zum Text mit Hintergrundbild: CSS background-clip und background-origin

CSS mask – weicher Übergang

Bilder, die mit einem Verlauf oder mit einer Alpha-Maske vom Hintergrund getrennt werden, fallen aus dem Rahmen und erzeugen eine Vignette. Die Eigenschaften CSS mask-position und mask-size lassen sich darüber hinaus animieren.

<div id="banner">
	<div><img src="fruchtig1.jpg" alt="…"></div>
	<div><img src="fruchtig2jpg" alt="…"></div>
</div>

#banner {
	max-width: 640px; /* Max Breite der Bilder */
	aspect-ratio: 640/424; /* Seitenverhältnis */
	position: relative;  /* Um Bilder absolut zu positionieren */
	border: 8px solid #eee;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
}

#banner div {
	position: absolute; /* Absolut positionierte Bilder sitzen automatisch auf top:0 und left:0 */
}

/* Das zweite Bild liegt oben */
#banner div:nth-child(2) {
	animation: wipe 5s 2.5s infinite alternate;
	mask-size: 400% 400%;
	mask-image: linear-gradient(135deg, 
				rgba(0,0,0,1) 0%, 
				rgba(0,0,0,1) 45%, 
				rgba(0,0,0,0) 50%, 
				rgba(0,0,0,0) 60%, 
				rgba(0,0,0,0) 100%);
}

@-webkit-keyframes wipe {
	0% {mask-position: 0 0}
	100% {mask-position: -1200px -1200px}
}

Weiche Masken für Effekte und Animationen: CSS mask