Тени

Вы можете использовать тени для визуального выделения элементов. В SIMAI Framework используется подход к теням предложенный концепцией Material Design от Google. Подробнее можно прочитать на сайте проекта

Базовые тени

Для того чтобы придать элементу тень, используйте класс .shadow-{уровень} где:

  • уровень. Обязательный параметр. Обозначает уровень тени. Чем больше значение, тем "выше" объект отбрасывающий тень. Принимает значение от 0 до 24. Нулевое значение отменяет тень.
.shadow-0
.shadow-1
.shadow-2
.shadow-3
.shadow-4
.shadow-5
.shadow-6
.shadow-7
.shadow-8
.shadow-9
.shadow-10
.shadow-11
.shadow-12
.shadow-13
.shadow-14
.shadow-15
.shadow-16
.shadow-17
.shadow-18
.shadow-19
.shadow-20
.shadow-21
.shadow-22
.shadow-23
.shadow-24
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white shadow-0">
<div class="align-middle">.shadow-0</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white shadow-1">
<div class="align-middle">.shadow-1</div>
</div>

Тень при наведении

Если вы хотите чтобы тень появлялась только при наведении, используйте класс .shadow-hover-{уровень} где:

  • уровень. Обязательный параметр. Обозначает уровень тени. Чем больше значение, тем "выше" объект отбрасывающий тень. Принимает значение от 1 до 24.
Используйте добавочный класс .transition ,чтобы сделать появление и исчезновение тени плавной.
.shadow-hover-0
.shadow-hover-1
.shadow-hover-2
.shadow-hover-3
.shadow-hover-4
.shadow-hover-5
.shadow-hover-6
.shadow-hover-7
.shadow-hover-8
.shadow-hover-9
.shadow-hover-10
.shadow-hover-11
.shadow-hover-12
.shadow-hover-13
.shadow-hover-14
.shadow-hover-15
.shadow-hover-16
.shadow-hover-17
.shadow-hover-18
.shadow-hover-19
.shadow-hover-20
.shadow-hover-21
.shadow-hover-22
.shadow-hover-23
.shadow-hover-24
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white transition shadow-hover-0">
<div class="align-middle">.shadow-hover-0</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white transition shadow-hover-1">
<div class="align-middle">.shadow-hover-1</div>
</div>

Подъем при наведении

Вы можете сделать так, чтобы объект поднимался при наведении. Для этого добавьте дополнительный класс.shadow-hover-up-{уровень} где:

  • уровень. Не обязательный параметр. Обозначает уровень подъема элемента. Принимает значение от 1 до 5. Если параметр не указан, то элемент поднимается на 1px.
.shadow-hover-up-1
.shadow-hover-up-2
.shadow-hover-up-3
.shadow-hover-up-4
.shadow-hover-up-5
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white transition shadow-hover-0">
<div class="align-middle">.shadow-hover-0</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white transition shadow-hover-1">
<div class="align-middle">.shadow-hover-1</div>
</div>