Tuesday, March 7, 2017

Materialize - Shadows

Materialize has several special classes to display containers as paper-like cards with shadow.
S.N.Class Name & Description
1z-depth-0
Remove the shadow of elements having z-depth by default.
2z-depth-1
Styles a container for any HTML content with 1px bordered shadow. Adds z-depth of 1.
3z-depth-2
Styles a container for any HTML content with 2px bordered shadow. Adds z-depth of 2.
4z-depth-3
Styles a container for any HTML content with 3px bordered shadow. Adds z-depth of 3.
5z-depth-4
Styles a container for any HTML content with 4px bordered shadow. Adds z-depth of 4.
6z-depth-5
Styles a container for any HTML content with 5px bordered shadow. Adds z-depth of 5.

Example

materialize_shadows.htm
<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">      
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>             
    <style>
      div {
      width : 200px; 
   height : 200px;    
   } 
   </style>
   </head>
   <body class="container"> 
      <h2>Materialize Shadow Examples</h2>
      <hr/>
   <div class="card-panel">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class="z-depth-1">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
   <div class="z-depth-2">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
   <div class="z-depth-3">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
   <div class="z-depth-4">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
   <div class="z-depth-5">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>   
   </body>
</html>

Result

Verify the result.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)