Beispiel:CSS3 box-shadow.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
	<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>box-shadow</title>
		<style>
#one {
	box-shadow: 10px 10px 10px 15px grey;
}

#two {
  box-shadow: 10px 0 10px grey inset;
}

#three {
  border: thin solid grey;
  border-radius: 0.3em;
  box-shadow: 10px 10px 10px white inset, 10px 10px 10px grey;
}

#four {
	border-radius: 1.5em;
	border: 0.5em solid red;
	box-shadow: 0 0 0 1em red inset;
	padding: 1em;
}

#five {
  box-shadow: 2em 0 khaki inset, -2em 0 khaki inset, 0 -5px 0 0 red inset;
}
#stack {
    box-shadow:
10px 10px 0px -3px rgba(255, 255, 255),
10px 10px rgba(0, 0, 0, 0.4),
20px 20px 0px -3px rgba(255, 255, 255),
20px 20px rgba(0, 0, 0, 0.3),
30px 30px 0px -3px rgba(255, 255, 255),
30px 30px rgba(0, 0, 0, 0.2),
40px 40px 0px -3px rgba(255, 255, 255),
40px 40px rgba(0, 0, 0, 0.1),
50px 50px 0px -3px rgba(255, 255, 255),
50px 50px rgba(0, 0, 0, 0.05);
}

#rainbow {
    box-shadow:
0px 0px 0px 3px red,
0px 0px 0px 6px orange,
0px 0px 0px 9px yellow,
0px 0px 0px 12px green,
0px 0px 0px 15px blue,
0px 0px 0px 18px indigo,
0px 0px 0px 21px violet;
}

div {
	float: left;
	width: 8em;
	aspect-ratio: 1;
	margin: 2em;
	padding: 0.5em;
	background-color: beige;
}

h2 {
  clear: left;
}

</style>
	</head>
<body>
	<h1>Verwendung von <code>box-shadow</code></h1>
		
	<div id="one">Box mit Schlagschatten</div>
	<div id="two">Box mit innen liegendem Schatten</div>
	<div id="three">mehrere Schatten werden durch Kommata getrennt</div>
	<div id="four">„Abgeschnittene Rahmen“</div>
	<div id="five">verkürzte Unterstreichung</div> 
<h2>Spielereien</h2>
<div id="stack">Ist das ein div oder gleich mehrere?</div>
<div id="rainbow">Regenbogen</div>		
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_box-shadow.html&oldid=94276“