@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": false, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": false, "plugin_dropzone": false, "plugin_tagsinput": false, "plugin_clockpicker": false, "plugin_pikaday": false, "plugin_spectrum": false, "plugin_inputmask": false, "plugin_parsley": false, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": false, "plugin_fullcalendar": false, "plugin_simpleweather": false, "plugin_prettify": true }) @@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "css-shadow", "classes": "yay-shrink yay-hide-to-small yay-gestures" })
@@include('./parts/title.html', { "title": "Shadow", "crumbs": "
  • Dashboard
  • CSS
  • Shadow
    • " })
    In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.

    Basic

    You can easily apply this shadow effect by adding a class="z-depth-2" to an HTML tag. 

    <div class="col s12 m2">
  <p class="z-depth-1">z-depth-1</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-2">z-depth-2</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-3">z-depth-3</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-4">z-depth-4</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-5">z-depth-5</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-6">z-depth-6</p>
</div>

    Hover

    Also you can use shadow on hover. Just apply this shadow effect by adding a class="z-depth-2-hover" to an HTML tag. 

    <div class="col s12 m2">
  <p class="z-depth-1-hover">z-depth-1-hover</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-1 z-depth-2-hover">z-depth-2-hover</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-1 z-depth-3-hover">z-depth-3-hover</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-1 z-depth-4-hover">z-depth-4-hover</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-1 z-depth-5-hover">z-depth-5-hover</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-1 z-depth-6-hover">z-depth-6-hover</p>
</div>
    @@include('./parts/search-bar.html') @@include('./parts/chat.html') @@include('./parts/foot.html', { "copyright": true })