div box shadow

This bootstrap snippet called "div box shadow" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: div,box,shadow

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

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);
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jun 16th 2015, 08:06

Views: 564