Beispiel:CSS3 clip-path-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
	<title>clip-path</title>
	<style>
.clip-rect {
	-webkit-clip-path: inset(80px 110px 190px 90px round 5px);
	clip-path: inset(80px 110px 190px 90px round 5px);
}
.clip-circle {
	-webkit-clip-path: circle(100px at 105px 100px);
	clip-path: circle(100px at 105px 100px);
}
.clip-ellipse {
	-webkit-clip-path: ellipse(90px 140px at 125px 140px);
	clip-path: ellipse(90px 140px at 125px 140px);
}
.clip-poly {
	/* Stern als Polyline */
	-webkit-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);
	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 {
	-webkit-clip-path: none;
	clip-path: none;
}
#gallery {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em
}
@media (max-width: 45em) { #gallery {grid-template-columns: repeat(2, 1fr);} }
	</style>
</head>
<body>
	<h1>Verwendung von <code>clip-path</code></h1>
<div id="gallery">
	<figure>
		<img class="clip-rect" src="/images/4/4d/Celsius.jpg" alt="Anders Celsius" title="Anders Celsius">
	</figure>
	<figure>
		<img class="clip-circle" src="/images/4/4d/Celsius.jpg" alt="Anders Celsius" title="Anders Celsius">
	</figure>
	<figure>
		<img class="clip-ellipse" src="/images/4/4d/Celsius.jpg" alt="Anders Celsius" title="Anders Celsius">
	</figure>
	<figure>
		<img class="clip-poly" src="/images/4/4d/Celsius.jpg" alt="Anders Celsius" title="Anders Celsius">
	</figure>
</div>
</body>
</html>