Beispiel:CSS-mask-border.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">
	<title>mask-border</title>
<style>
.stamptiles {
	-webkit-mask-box-image: url('https://wiki.selfhtml.org/images/8/8e/StampTiles.svg') 25% / 5% space;
	mask-border: url('https://wiki.selfhtml.org/images/8/8e/StampTiles.svg') 25% / 5% fill;
}

img {
	width: 15em;
}

#galerie {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));;
  gap: 1em; 
  padding: 0;
}

figure {width: 100%;}

</style>
</head>
<body>
<div id="galerie">
	<figure>
		<img 
			src="https://wiki.selfhtml.org/images/8/8e/StampTiles.svg"
			alt="StampTiles - gekachelte Perforation">
		<figcaption>Kachel als Vorlage</figcaption>
	</figure>
	<figure>
		<img class="stamptiles"
			src="https://wiki.selfhtml.org/images/4/4a/Lauf-2.jpg"
			alt="Lauf an der Pegnitz">
		<figcaption>Weder <code>-webkit-box-image</code> noch
			<code>mask-border</code> funktionieren im Firefox!</figcaption>
	</figure>

</div>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-mask-border.html&oldid=99539“