Bootstrap snippet: div box shadow

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: div,box,shadow



<div class="container bootstrap snippet"> <div class="row"> <div class="col-sm-4 col-xs-6"> <div class="bs-item z-depth-1"> .z-depth-1 / .z-depth(1) </div> </div> <div class="col-sm-4 col-xs-6"> <div class="bs-item z-depth-2"> .z-depth-1 / .z-depth(1) </div> </div> <div class="col-sm-4 col-xs-6"> <div class="bs-item z-depth-3"> .z-depth-1 / .z-depth(1) </div> </div> </div> <div class="row"> <div class="col-sm-4 col-xs-6"> <div class="bs-item z-depth-4"> .z-depth-1 / .z-depth(1) </div> </div> <div class="col-sm-4 col-xs-6"> <div class="bs-item z-depth-5"> .z-depth-1 / .z-depth(1) </div> </div> </div> </div>
body{margin-top:20px;} .bs-item { background: #fff; margin-bottom: 30px; height: 100px; text-align: center; padding: 10px; font-size: 14px; border-radius: 2px; } .z-depth-1 { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); } .z-depth-2 { box-shadow: 0 8px 17px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); } .z-depth-3 { box-shadow: 0 12px 15px rgba(0, 0, 0, 0.24), 0 17px 50px rgba(0, 0, 0, 0.19); } .z-depth-4 { box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22), 0 25px 55px rgba(0, 0, 0, 0.21); } .z-depth-5 { box-shadow: 0 27px 24px rgba(0, 0, 0, 0.2), 0 40px 77px rgba(0, 0, 0, 0.22); }
Dey-Dey

div box shadow

Dey-Dey
  Jun 16th 2015, 08:06
234 Views