Materialize Shadow

Materialize provides a set of classes to create shadow effects on elements. Shadows can be added to both text and card elements. These shadows give a depth and dimension to the elements, making them more visually appealing.

Syntax

To add shadow to an element, add the class="z-depth-<depth>" attribute, where <depth> is the depth of the shadow. Materialize provides 5 different levels of shadow depth, ranging from 1 to 5. The syntax for adding a shadow to a card element is the same.

<h1 class="z-depth-3">This text has shadow</h1>

<div class="card z-depth-4">
  <div class="card-content">
    <span class="card-title">Card Title</span>
    <p>Card Content</p>
  </div>
</div>

Use

The Materialize shadow classes can be used to add depth and dimension to various elements on your webpage. They can be used to emphasize importance, provide visual hierarchy, and add a modern touch to your website design. Shadows can be added to text, buttons, cards, and other elements.

Importance

Shadows provide a subtle but effective way to improve the overall appearance of your webpage. They add depth and dimension, making elements stand out against each other, and they provide a modern touch to your design. Materialize provides a range of shadow depths, giving you flexibility in choosing the level of shadow that suits your design.

Example

Here is an example of a login form with shadow effect:

<div class="row">
  <form class="col s12">
    <div class="card-panel z-depth-3">
      <div class="row">
        <div class="input-field col s12">
          <input id="username" type="text">
          <label for="username">Username</label>
        </div>
        <div class="input-field col s12">
          <input id="password" type="password">
          <label for="password">Password</label>
        </div>
        <div class="input-field col s12">
          <button class="waves-effect waves-light btn">Sign in</button>
        </div>
      </div>
    </div>
  </form>
</div>

Summary

Materialize shadow classes provide a simple and effective way to add depth and dimension to your website design. By using the class="z-depth-<depth>" attribute, you can add shadows to various elements on your webpage, including text, buttons, and cards. Shadows improve the overall appearance of your design and provide a modern touch to your website.