mdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.

Ombres

mdui fournit 24 profondeurs d’ombre différentes, ce qui permet de répondre à tous les besoins des scénarios de Material Design.

Lecture associée

Spécifications Material Design : Altitude et ombre

Ajouter une ombre

Il suffit d’ajouter la classe .mdui-shadow-[1-24] à un élément pour lui donner une ombre correspondant à une profondeur donnée. Ajouter la classe .mdui-shadow-0 permet de supprimer l’ombre.

Faites glisser le curseur ci-dessous pour observer les variations d’ombre selon la profondeur.

Rendre l’ombre plus marquée au survol

Ajoutez la classe .mdui-hoverable à n’importe quel élément pour intensifier l’ombre au survol de la souris.

Exemple

<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>

Classes CSS

Nom de classe	Description
`.mdui-shadow-0`	Supprimer l’ombre
`.mdui-shadow-[1-24]`	Ajouter des ombres de différentes profondeurs
`.mdui-hoverable`	Rendre l’ombre plus marquée au survol

Utilitaires

Effet ripple