The following code will be used for educational purposes. It is to demonstrate various way that the box-shadow property can be used. Any feedback on areas where I have not used best practices would be great.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Box Shadow</title>
<link rel="stylesheet" type="text/css" href="boxshadow.css">
</head>
<body>
<!-- Introduction to the text shadow property -->
<div class="container one">
<div class="shadow1 box left"></div>
<div class="shadow2 box right"></div>
</div>
<div class="container two">
<div class="shadow3 box left"></div>
<div class="shadow4 box right"></div>
</div>
<div class="container three">
<div class="shadow5 box left"></div>
<div class="shadow6 box right"></div>
</div>
</body>
</html>
CSS:
body{
background: #ccc;
margin: 0;
}
.container{
padding: 20px 50px;
overflow: hidden;
}
.box{
background-color: #fff;
width: 500px;
height: 200px;
}
.left{
float: left;
}
.right{
float: right;
}
/* Basic Shadow */
.shadow1{
box-shadow: 5px 5px 0 rgba(150,150,150,0.5);
}
/* Inset Shadow and blur radius Variety */
.shadow2{
box-shadow: inset 0 0 10px black;
}
/* Inset Shadow and blur radius */
.shadow3{
background: #F2F2F2;
box-shadow: inset 3px 3px 3px #BFBFBF, inset -3px -3px 3px #8C8C8C;
border-radius: 10px;
}
/* Spread radius Shadow */
.shadow4{
box-shadow: 0 20px 10px -10px rgba(150,150,150,0.8);
}
/* Curved Shadows */
.shadow5{
position: relative;
overflow:hidden;
}
.shadow5:before{
content: "";
position: absolute;
z-index: 1;
width: 96%;
top: -15px;
height: 15px;
left: 2%;
border-radius: 100px / 5px;
box-shadow: 0 0 39px rgba(0,0,0,0.6);
}
.shadow5:after{
content: "";
position: absolute;
z-index: 1;
width: 96%;
bottom: -15px;
height: 15px;
left: 2%;
border-radius: 100px / 5px;
box-shadow: 0 0 39px rgba(0,0,0,0.6);
}
.shadow6{
position: relative;
overflow:hidden;
}
.shadow6:before{
content: "";
position:absolute;
z-index: 1;
width:10px;
top: 5%;
height: 90%;
left: -10px;
border-radius: 5px / 100px;
box-shadow:0 0 13px rgba(0,0,0,0.6);
}
.shadow6:after{
content: "";
position:absolute;
z-index: 1;
width:15px;
top: 5%;
height: 96%;
right: -15px;
border-radius: 5px / 100px;
box-shadow:0 0 13px rgba(0,0,0,0.6);
}