Beispiel:CSS3 linear-gradient.html
Aus SELFHTML-Wiki
<!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>linear-gradient() -1</title>
<style>
#one {
background-image: linear-gradient(white, black);
}
#two {
background-image: linear-gradient(42deg, transparent, blue);
}
#rainbow {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
#rainbow2 {
background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}
body {
display: grid;
grid-template-columns: repeat(auto-fill, 15em);
gap: 1em;
}
h1 {
grid-column: 1/-1;
}
div {
width: 15em;
height: 10em;
border: thin solid;
}
</style>
</head>
<body>
<h1>Verwendung von <code>linear-gradient()</code></h1>
<figure>
<div id="one"></div>
<figcaption>senkrechter Farbverlauf von weiß nach schwarz</figcaption>
</figure>
<figure>
<div id="two"></div>
<figcaption>Farbverlauf mit Transparenz</figcaption>
</figure>
<figure >
<div id="rainbow"></div>
<figcaption>Regenbogen</figcaption>
</figure>
<figure >
<div id="rainbow2"></div>
<figcaption>vertikaler Regenbogen</figcaption>
</figure>
</body>
</html>
