Beispiel:CSS3 radial-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>radial-gradient() - 2</title>
		<style>
#eins {
	background-image: radial-gradient(circle closest-side at center center , gold 20%, yellow 30%, dimgray 60%);
}
#zwei {
	background-image: radial-gradient(circle closest-corner at center center , gold 20%, yellow 30%, dimgray 60%);
}
#drei {
	background-image: radial-gradient(circle farthest-side at center center , gold 20%, yellow 30%, dimgray 60%);
}
#vier {
	background-image: radial-gradient(circle farthest-corner  at center center ,gold 20%, yellow 30%, dimgray 60%);
}
#fuenf {
	background-image: radial-gradient(ellipse closest-side at center 70% , gold 20%, yellow 30%, dimgray 60%);
}
#sechs {
	background-image: radial-gradient(ellipse closest-corner at center 70% , gold 20%, yellow 30%, dimgray 60%);
}
#sieben {
	background-image: radial-gradient(ellipse farthest-side at 70% 70% , gold 20%, yellow 30%, dimgray 60%);
}
#acht {
	background-image: radial-gradient(ellipse farthest-corner at 70% 70% , gold 20%, yellow 30%, dimgray 60%);
}
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;
}	

figure {width:15em;}

		</style>
	</head>
<body>
<h1>Ausrichtung von <code>radial-gradient()</code></code></h1>

<figure>
	<div id="eins"></div>
	<figcaption>circle closest-side</figcaption>
</figure>
<figure>
	<div id="zwei"></div>
	<figcaption>circle closest-corner</figcaption>
</figure>
<figure >
	<div id="drei"></div>
	<figcaption>circle closest-corner</figcaption>
</figure>
<figure >
	<div id="vier"></div>
	<figcaption>circle farthest-corner</figcaption>
</figure>
<figure>
	<div id="fuenf"></div>
	<figcaption>ellipse closest-side</figcaption>
</figure>
<figure>
	<div id="sechs"></div>
	<figcaption>ellipse closest-corner</figcaption>
</figure>
<figure >
	<div id="sieben"></div>
	<figcaption>ellipse farthest-sider</figcaption>
</figure>
<figure >
	<div id="acht"></div>
	<figcaption>ellipse farthest-corner</figcaption>
</figure>    

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