Тени

mdui предоставляет 24 уровня глубины теней, отвечающих любым сценариям дизайна Material Design.

Связанное чтение

Добавление тени

Просто добавьте класс .mdui-shadow-[1-24] к элементу, чтобы задать тень соответствующей глубины. Класс .mdui-shadow-0 удаляет тень.

Используйте ползунок ниже, чтобы увидеть, как меняется тень на разных уровнях глубины.

Усиление тени при наведении

Добавьте класс .mdui-hoverable к любому элементу, чтобы тень становилась глубже при наведении курсора.

Пример

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

Список CSS-классов

Имя класса	Описание
`.mdui-shadow-0`	Удалить тень
`.mdui-shadow-[1-24]`	Добавление теней разной глубины
`.mdui-hoverable`	Усиление тени при наведении

Вспомогательные классы

Эффект ripple