Тени
Используйте тени для создания эффекта объема. Тени при наведении позволят создать интерактивность в поведении элементов интерфейса.
Базовые тени
Для того чтобы придать элементу тень, используйте класс .shadow-{уровень} где:
- уровень. Обязательный параметр. Обозначает уровень тени. Чем больше значение, тем "выше" объект отбрасывающий тень. Принимает значение от 0 до 5. Нулевое значение отменяет тень.
.shadow-0
.shadow-1
.shadow-2
.shadow-3
.shadow-4
.shadow-5
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white shadow-0">
<div class="align-middle c-text-secondary">.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 c-text-secondary">.shadow-1</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white shadow-2">
<div class="align-middle c-text-secondary">.shadow-2</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white shadow-3">
<div class="align-middle c-text-secondary">.shadow-3</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white shadow-4">
<div class="align-middle c-text-secondary">.shadow-4</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white shadow-5">
<div class="align-middle c-text-secondary">.shadow-5</div>
</div>Тень при наведении
Если вы хотите чтобы тень появлялась только при наведении, используйте класс .hover:shadow-{уровень} где:
- уровень. Обязательный параметр. Обозначает уровень тени. Чем больше значение, тем "выше" объект отбрасывающий тень. Принимает значение от 1 до 5.
Используйте добавочный класс
.transition ,чтобы сделать появление и исчезновение тени плавной..hover:shadow-0
.hover:shadow-1
.hover:shadow-2
.hover:shadow-3
.hover:shadow-4
.hover:shadow-5
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white transition shadow-2 shadow-hover-0">
<div class="align-middle t--1 c-text-secondary">.shadow-hover-0</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white transition hover:shadow-1">
<div class="align-middle t--1 c-text-secondary">.hover:shadow-1</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white transition hover:shadow-2">
<div class="align-middle t--1 c-text-secondary">.hover:shadow-2</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white transition hover:shadow-3">
<div class="align-middle t--1 c-text-secondary">.hover:shadow-3</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white transition hover:shadow-4">
<div class="align-middle t--1 c-text-secondary">.hover:shadow-4</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white transition shadow-hover-5">
<div class="align-middle t--1 c-text-secondary">.shadow-hover-5</div>
</div>Подъем при наведении
Вы можете сделать так, чтобы объект поднимался при наведении. Для этого добавьте дополнительный класс.hover:up-{уровень} где:
- уровень. Обязательный параметр. Обозначает уровень подъема элемента. Принимает значение от 1 до 5.
.hover:up-1
.hover:up-2
.hover:up-3
.hover:up-4
.hover:up-5
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white transition shadow-0 hover:shadow-1 hover:up-1 r-3 hover:b-0 b-1 b-theme-2">
<div class="align-middle t--1 c-text-secondary">.hover:up-1</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white transition shadow-0 hover:shadow-2 hover:up-2 r-3 hover:b-0 b-1 b-theme-2">
<div class="align-middle t--1 c-text-secondary">.hover:up-2</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white transition shadow-0 hover:shadow-3 hover:up-3 r-3 hover:b-0 b-1 b-theme-2">
<div class="align-middle t--1 c-text-secondary">.hover:up-3</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white transition shadow-0 hover:shadow-4 hover:up-4 r-3 hover:b-0 b-1 b-theme-2">
<div class="align-middle t--1 c-text-secondary">.hover:up-4</div>
</div>
<div class="d-inline-block m-4 hr-4 wr-4 t-center bg-white transition shadow-0 hover:shadow-5 hover:up-5 r-3 hover:b-0 b-1 b-theme-2">
<div class="align-middle t--1 c-text-secondary">.hover:up-5</div>
</div>