HTML Dog
Skip to navigation

Box shadows

Adding pop.

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Box shadows</title>
	<style>
		body {
			font: 14px courier, monospace;
			padding: 25px;
			margin: 0;
			background: #edc;
			color: #000;
		}
	
		p {
			width: 400px;
			height: 50px;
			padding: 50px;
			margin: 25px;
			background: white;
			float: left;
		}
		#shadow1 {
			box-shadow: 5px 5px;
		}
		#shadow2 {
			box-shadow: 5px 5px 3px 1px #999;
		}
		#shadow3 {
			box-shadow: 5px 5px 3px 1px rgba(0,0,0,.4);
		}
		#shadow4 {
			box-shadow: 0 0 10px 0 rgba(0,0,0,.4);
		}
		#shadow5 {
			box-shadow: inset 0 0 10px 0 rgba(0,0,0,.4);
		}


		#shadowBoxer {
			width: 120px;
			height: 90px;
			padding: 30px 40px;
			box-shadow: 0 0 20px 5px #06c;
		}
	</style>
</head>
<body>
	<p id="shadow1"><code>box-shadow: 5px 5px;</code></p>
	<p id="shadow2"><code>box-shadow: 5px 5px 3px 1px #999;</code></p>
	<p id="shadow3"><code>box-shadow: 5px 5px 3px 1px rgba(0,0,0,.4);</code></p>
	<p id="shadow4"><code>box-shadow: 0 0 10px 0 rgba(0,0,0,.4);</code></p>
	<p id="shadow5"><code>box-shadow: inset 0 0 10px 0 rgba(0,0,0,.4);</code></p>

	<!-- Link back to HTML Dog: -->
	<p id="shadowBoxer"><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>

Output

View original