Materialize CSS Pulse and Shadow
Pulse: Used for get attention towards buttons with this subtle but captivating effect. Just required to add pulse class to buttons.
Note: This is used only for floating button since it will not work with other components.
<a class=”btn-floating pulse”><i class=”material-icons”>battery_alert</i></a>
<a class=”btn-floating btn-large pulse”><i class=”material-icons”>arrow_downward</i></a>
<a class=”btn-floating btn-large cyan pulse”><i class=”material-icons”>edit</i></a>
Example:
HTML
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= <style> .margin { margin: 30px 0px; } </style> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body class="container"> <div class="row center-align"> <h2>Pulse</h2> <div class="col s6 margin "> <a class="btn btn-floating btn-large pulse"> <i class="material-icons"> menu </i> </a> </div> <div class="col s6 margin"> <a class="btn btn-floating btn-large light-green pulse"> <i class="material-icons"> account_circle </i> </a> </div> <div class="col s6 margin"> <a class="btn btn-floating btn-large green pulse"> <i class="material-icons"> edit </i> </a> </div> <div class="col s6 margin"> <a class="btn btn-floating btn-large green pulse"> <i class="material-icons"> notifications </i> </a> </div> </div> <!-- Compiled and minified JavaScript --> <script src= </script> </body> </html> |
Output:
Shadow: To determine how far raised or close the element is from a page, Materialize uses shadow effect. For this class=”z-depth-1″ is used. Depending on shadow effect, there are five classes, from class=”z-depth-1″ to class=”z-depth-5″.
<div class="col s12 m2">
<p class="z-depth-1"> For z-depth-1</p>
</div>
<div class="col s12 m2">
<p class="z-depth-2"> For z-depth-2</p>
</div>
<div class="col s12 m2">
<p class="z-depth-3"> For z-depth-3</p>
</div>
<div class="col s12 m2">
<p class="z-depth-4"> For z-depth-4</p>
</div>
<div class="col s12 m2">
<p class="z-depth-5"> For z-depth-5</p>
</div>
Example:
HTML
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body class="container"> <div class="row center-align"> <h2>Shadow</h2> <div class=" col s3 m2 "> <h4 class="z-depth-1 green"> Geeks for Geeks </h4> </div> <div class=" col s3 m2"> <h4 class="z-depth-2 green"> Geeks for Geeks </h4> </div> <div class=" col s3 m2"> <h4 class="z-depth-3 green"> Geeks for Geeks </h4> </div> <div class=" col s3 m2"> <h4 class="z-depth-4 green"> Geeks for Geeks </h4> </div> <div class=" col s3 m2"> <h4 class="z-depth-5 green"> Geeks for Geeks </h4> </div> <!-- Compiled and minified JavaScript --> <script src= </script> </div> </body> </html> |
Output:
Please Login to comment...