Beispiel:CSS3 linear-gradient-2.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>linear-gradient() - 2</title>
		<style>
.angle  div { 
    background-image: 
        linear-gradient(45deg, red 50%, blue 50%); 
}
.corner div { 
    background-image: 
        linear-gradient(to top right, red 50%, blue 50% ); 
}
            
.landscape    { width: 20em; }
.square       { width: 10em; }
.portrait     { width:  5em; }
            
.angle,.corner {
	display: grid;
	grid-template-columns: 10em 5em 20em;
	gap: 2em;
}
.angle > figcaption,.corner >figcaption {
    grid-column: 1 / -1;
}

div {
	width: 10em;
	height: 10em;
	border: thin solid;
}	


		</style>
	</head>
<body>
<h1>Richtungsangaben bei <code>linear-gradient()</code></h1>

<figure class="angle">    
    <figure>
        <div class="square"></div>
        <figcaption>square</figcaption>
    </figure>
    <figure>
        <div class="portrait"></div>
        <figcaption>portrait</figcaption>
    </figure>
    <figure >
        <div class="landscape"></div>
        <figcaption>landscape</figcaption>
    </figure>
    <figcaption>Farbverläufe mit einer Richtung von 45°<br>(Diese führen nur bei einem Quadrat durch die linke obere Ecke!)</figcaption>
</figure>
    
<figure class="corner">    
    <figure>
        <div class="square"></div>
        <figcaption>square</figcaption>
    </figure>
    <figure>
        <div class="portrait"></div>
        <figcaption>portrait</figcaption>
    </figure>
    <figure >
        <div class="landscape"></div>
        <figcaption>landscape</figcaption>
    </figure>
    <figcaption>Farbverläufe zur oberen rechten Ecke</figcaption>
</figure>   

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_linear-gradient-2.html&oldid=69535“