HTML code
Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection
<div class="container bootstrap snippets">
<div class="row">
<div class="col-sm-2 text-center">
<p>Without shadow</p>
<div class="box-shadow-demo"></div>
</div>
<div class="col-sm-2 text-center">
<p>.z-depth-1</p>
<div class="box-shadow-demo z-depth-1"></div>
</div>
<div class="col-sm-2 text-center">
<p>.z-depth-2</p>
<div class="box-shadow-demo z-depth-2"></div>
</div>
<div class="col-sm-2 text-center">
<p>.z-depth-3</p>
<div class="box-shadow-demo z-depth-3"></div>
</div>
<div class="col-sm-2 text-center">
<p>.z-depth-4</p>
<div class="box-shadow-demo z-depth-4"></div>
</div>
<div class="col-sm-2 text-center">
<p>.z-depth-5</p>
<div class="box-shadow-demo z-depth-5"></div>
</div>
</div>
</div>CSS code
Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection
body{margin-top:20px;}
.box-shadow-demo {
background-color: #009688;
height: 100px;
width: 100px;
margin: 20px auto;
}
.z-depth-1 {
-webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37);
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37);
}
.z-depth-2 {
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3);
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3);
}
.z-depth-3 {
-webkit-box-shadow: 0 11px 7px 0 rgba(0,0,0,0.19),0 13px 25px 0 rgba(0,0,0,0.3);
box-shadow: 0 11px 7px 0 rgba(0,0,0,0.19),0 13px 25px 0 rgba(0,0,0,0.3);
}
.z-depth-4 {
-webkit-box-shadow: 0 14px 12px 0 rgba(0,0,0,0.17),0 20px 40px 0 rgba(0,0,0,0.3);
box-shadow: 0 14px 12px 0 rgba(0,0,0,0.17),0 20px 40px 0 rgba(0,0,0,0.3);
}
.z-depth-5 {
-webkit-box-shadow: 0 17px 17px 0 rgba(0,0,0,0.15),0 27px 55px 0 rgba(0,0,0,0.3);
box-shadow: 0 17px 17px 0 rgba(0,0,0,0.15),0 27px 55px 0 rgba(0,0,0,0.3);
}
About this snippet
Rated 5/5
based on 2 reviews