El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Sombras

mdui ofrece 24 profundidades de sombra diferentes, suficientes para cualquier escenario de Material Design.

Lectura relacionada

Pautas de diseño de Material Design: Elevación y sombras

Añadir sombra

Solo añade la clase .mdui-shadow-[1-24] al elemento para que tenga la profundidad de sombra correspondiente. Añadir la clase .mdui-shadow-0 elimina la sombra.

Arrastra el control deslizante de abajo para ver cómo cambian las sombras según la profundidad.

Oscurecer la sombra al pasar el cursor

Añade la clase .mdui-hoverable a cualquier elemento para oscurecer la sombra al pasar el cursor.

Ejemplo

<div class="mdui-card mdui-hoverable">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

Lista de clases CSS

Nombre de clase	Descripción
`.mdui-shadow-0`	Eliminar sombra
`.mdui-shadow-[1-24]`	Añadir sombras con distinta profundidad
`.mdui-hoverable`	Oscurecer la sombra al pasar el cursor

Asistentes

Efecto Ripple