Beispiel:CSS border-image-5.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>border-image - 5</title>
<style>
.full-background {
	--gradient: linear-gradient(to right, red 10%, gold, yellow);
  border-image: var(--gradient) fill 0// 0 50vw;
}
.slanted-background {
	--bOffset: calc((100vw - var(--bodyWidth)) / 2); 
	--gradient: linear-gradient(-36deg, transparent 20%, gold 20%, yellow 90%, transparent 90%);
  border-image: var(--gradient) fill 0// 1em var(--bOffset);
}

body {
	--bodyWidth: 40em;
  margin-inline: max(10px, 50% - var(--bodyWidth)/2);
  margin-block: 3em; 
}


</style>
</head>
<body><h1 class="full-background">Hintergrundeffekte mit border-image</h1>
  <p>Mit den Rahmenbildeigenschaften der <code>border-image</code>-Eigenschaft kann man ein Bild festlegen, das – in Einzelteile zerlegt – in den Rahmenbereichen eines Elements angezeigt wird. Bevor es border-radius gab, wurden so „runde Ecken“ erzeugt. Noch interessanter ist es aber, vom Browser erzeugte Verläufe für vielfältige visuelle Zwecke zu verwenden.</p>

<section class="slanted-background">
  <h2 class="full-line">border-image mit Verlauf</h2>
  <p>Wenn man die <code>border-image-slice</code>-Eigenschaft mit dem Schlüsselwort <code>fill</code> verwendet, kann der von CSS erzeugte Gradient über die gesamte Fläche gezeichnet werden, anders als bei <code>Background-image</code> kann aber die Breite über das Element herausragen!</p>
</section>
  <h2>SELFHTML</h2>
  <p><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik">SELFHTML bietet seit 1995 eine Dokumentation</a> zu allem rund um HTML (und ab 1997) auch zu CSS. Mittlerweile gibt es über 300 CSS-Eigenschaften in unserem Wiki!</p>
  <p><a href="https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Mitmachen">Hilf mit das SELFHTML-Projekt aktuell zu halten und zu verbessern!</a></p>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS_border-image-5.html&oldid=99845“