You can easily apply this shadow effect by adding a classes are z-depth-0, z-depth-1, z-depth-2, z-depth-3, z-depth-4 and z-depth-5 to an HTML tag. Finally z-depth-0 can be used to remove shadows from elements that have z-depths by default.
Alternatively you can extend any of these shadows with Sass using @extend .z-depth-1.
<style type="text/css">
.box-demo{
padding:40px 0px;
color:#FFF;
margin:20px 0px;
}
</style>
<div class="row center-align">
<div class="col s6 m4 l2">
<div class="amber box-demo z-depth-0">
<p>z-depth-0</p>
</div>
</div>
<div class="col s6 m4 l2">
<div class="amber box-demo z-depth-1">
<p>z-depth-1</p>
</div>
</div>
<div class="col s6 m4 l2">
<div class="amber box-demo z-depth-2">
<p>z-depth-2</p>
</div>
</div>
<div class="col s6 m4 l2">
<div class="amber box-demo z-depth-3">
<p>z-depth-3</p>
</div>
</div>
<div class="col s6 m4 l2">
<div class="amber box-demo z-depth-4">
<p>z-depth-4</p>
</div>
</div>
<div class="col s6 m4 l2">
<div class="amber box-demo z-depth-5">
<p>z-depth-5</p>
</div>
</div>
</div>Our website is made possible by displaying ads to our visitors.
Please help us continue to provide you with free. So please disabling your ad blocker.