Skugga (box-shadow)

Box 1

#box1 {
width: 400px;
float: left;
margin: 20px;
padding: 20px;
background-color: #BAD1BA;
border-radius: 10px;
box-shadow:
5px 5px 10px rgba(0,0,0, 0.4);
}

Box 2

#box2 {
width: 400px;
float: left;
margin: 20px;
padding: 20px;
background-color: #BAD1BA;
border-radius: 10px;
box-shadow:
-5px -5px 10px rgba(0,0,0, 0.4);
}

Box 3

#box3 {
width: 370px;
float: left;
margin: 20px;
padding: 20px;
background-color: #BAD1BA;
border: 15px solid #fff;
border-radius: 5px;
box-shadow:
0 10px 20px rgba(0,0,0, 0.5);
}

Box 4

#box4 {
width: 400px;
float: left;
margin: 20px;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow:
0 0 15px rgba(0,0,0, 0.5);
}

Box 5

#box5 {
width: 400px;
float: left;
margin: 20px;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow:
0 0 15px 10px rgba(204,255,0, 0.8);
}

Box 6

#box6 {
width: 400px;
float: left;
margin: 20px;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow:
0 10px 20px rgba(0,0,0, 0.4);
}

Box 7

#box7 {
width: 370px;
float: left;
margin: 20px;
padding: 20px;
background-color: #fff;
border: 15px solid #BAD1BA;
border-radius: 5px;
box-shadow:
inset 0 10px 20px rgba(0,0,0, 0.35);
}

Box 8

#box8 {
width: 370px;
float: left;
margin: 20px;
padding: 20px;
background-color: #fff;
border: 15px solid #BAD1BA;
border-radius: 5px;
box-shadow:
inset -5px -5px 20px rgba(0,0,0, 0.4);
}

Box 9

width: 400px;
float: left;
clear: left;
margin: 20px;
padding: 20px 0 0 30px;
background-color: #CC9900;
border-radius: 25px;
box-shadow:
inset 5px 5px 5px rgba(255,255,255, 0.7),
inset -5px -5px 5px rgba(0,0,0, 0.5),
5px 5px 5px rgba(0,0,0, 0.35);

Box 10

#box10 {
width: 400px;
float: left;
clear: right;
margin: 20px;
padding: 20px 0 0 30px;
background-color: #CC9900;
border-radius: 15px;
box-shadow:
inset 5px 5px 5px rgba(255,255,255, 0.7),
inset -5px -5px 5px rgba(0,0,0, 0.5),
inset 5px 5px 50px 50px rgba(159,120,0, 1),
5px 5px 5px rgba(0,0,0, 0.4);
}