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>

Hintergrundeffekte mit border-image

Mit den Rahmenbildeigenschaften der border-image-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.

<section class="slanted-background">

border-image mit Verlauf

Wenn man die border-image-slice-Eigenschaft mit dem Schlüsselwort fill verwendet, kann der von CSS erzeugte Gradient über die gesamte Fläche gezeichnet werden, anders als bei Background-image kann aber die Breite über das Element herausragen!

</section>

SELFHTML

<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!

<a href="https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Mitmachen">Hilf mit das SELFHTML-Projekt aktuell zu halten und zu verbessern!</a>

</body> </html>

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