Тень элемента

box-shadow
hover

В SIMAI Framework с помощью модифкаторов можно задать тень элемента.

Классы

Класс Значение
shadow-0 box-shadow: 0 0 #0000;
shadow-1 box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadow-2 box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
shadow-3 box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
shadow-4 box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
shadow-5 box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

Описание

Адаптивный модификатор. Задает тень элемента в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • shadow-{0...6} - толщина кольца всех сторон.

Пример

Используйте модификатор shadow-{0...5} чтобы задать объемность тени. Чтобы убрать тень задайте величину равной 0..

shadow-0
shadow-1
shadow-2
shadow-3
shadow-4
shadow-5 
<div class="shadow-0 ...">shadow-0</div>
<div class="shadow-1 ...">shadow-1</div>
<div class="shadow-2 ...">shadow-2</div>
<div class="shadow-3 ...">shadow-3</div>
<div class="shadow-4 ...">shadow-4</div>
<div class="shadow-5 ...">shadow-5</div>

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

Используйте модификатор hover:shadow-{0...6} для установки тени при наведении.

<button class="hover:shadow-4 ...">Hover Me</button>

Адаптивность

Для установки тени, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.

Например, используйте модификатор md:shadow-2 для второй по величине тени для экранов размером Medium и больше.

<div class="md:shadow-2 ..."></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью