box shadow example(s) - drop shadow

box shadow example(s) - drop shadow Demo

View Demo Full Screen View Demo New Tab

box shadow example(s) - drop shadow Code

HTML

<h3>A pretty boring (basic) box shadow</h3>
<div class='demo-box box-shadow-1'></div>
<h3>This one is a bit more exciting</h3>
<p>playing a bit more with the blur and the distance and opacity of the shadow it make it look more shadowy (is that a word?) if not ill make it one now. </p>
<div class='demo-box box-shadow-2'></div>
<h3>Lets make it 3D!</h3>
<p>Ok this one is much cooler (can a shadow be cool, i think yes...), as it is interacted with (mouse over) you can see it appears to pop out a bit by increasing the blur shadow distance and opacity. Boom! :P</p>
<div class='demo-box box-shadow-3'></div>
<h3>Add some transitions and zoom and its crazy!</h3>
<p>Ok calm down, its just a shadow and a box but now its animated and transitioned... yes i know im just talking to my self... shh! :P</p>
<div class='demo-box box-shadow-4'></div>

CSS

.demo-box {
 margin:10px;
 height:100px;
 width:100px;
 border-radius:3px;
}
/* A pretty boring (basic) box shadow */
.box-shadow-1 {
 box-shadow: 0px 1px 2px #000;
}
/* This one is a bit more exciting */
.box-shadow-2 {
 box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
.box-shadow-3 {
 box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
.box-shadow-3:hover {
 box-shadow: 0px 10px 20px rgba(0,0,0,0.8);
}
.box-shadow-4 {
 box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
 transition: all 0.3s;
}
.box-shadow-4:hover {
 box-shadow: 0px 10px 20px rgba(0,0,0,0.8);
 transition: all 0.3s;
 transform: scale(1.1);
}