Падающая тень

drop-shadow
sm
md
lg
xl

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

Классы

Класс Значение
drop-shadow-0 filter: drop-shadow(var(--sf-0) var(--sf-0) #0000)
drop-shadow-1 filter: drop-shadow(var(--sf-0) var(--sf-px) var(--sf-px) rgb(var(--sf-black-r) var(--sf-black-g) var(--sf-black-b) / 0.05))
drop-shadow-2 filter: drop-shadow(var(--sf-0) var(--sf-px) var(--sf-a2) rgb(var(--sf-black-r) var(--sf-black-g) var(--sf-black-b) / 0.1)) drop-shadow(var(--sf-0) var(--sf-px) var(--sf-px) rgb(var(--sf-black-r) var(--sf-black-g) var(--sf-black-b) / 0.06))
drop-shadow-3 filter: drop-shadow(var(--sf-0) var(--sf-a4) var(--sf-a3) rgb(var(--sf-black-r) var(--sf-black-g) var(--sf-black-b) / 0.07)) drop-shadow(var(--sf-0) var(--sf-a2) var(--sf-a2) rgb(var(--sf-black-r) var(--sf-black-g) var(--sf-black-b) / 0.06))
drop-shadow-4 filter: drop-shadow(var(--sf-0) var(--sf-b0) var(--sf-a8) rgb(var(--sf-black-r) var(--sf-black-g) var(--sf-black-b) / 0.04)) drop-shadow(var(--sf-0) var(--sf-a4) var(--sf-a3) rgb(var(--sf-black-r) var(--sf-black-g) var(--sf-black-b) / 0.1))
drop-shadow-5 filter: drop-shadow(var(--sf-0) var(--sf-c0) var(--sf-b3) rgb(var(--sf-black-r) var(--sf-black-g) var(--sf-black-b) / 0.03)) drop-shadow(var(--sf-0) var(--sf-a8) var(--sf-a5) rgb(var(--sf-black-r) var(--sf-black-g) var(--sf-black-b) / 0.08))
drop-shadow-6 filter: drop-shadow(var(--sf-0) var(--sf-c2) var(--sf-c2) rgb(var(--sf-black-r) var(--sf-black-g) var(--sf-black-b) / 0.15))

Описание

Адаптивный модификатор. Позволяет управлять тенью элемента, в зависимости от размера области просмотра.

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

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

Пример

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

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

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

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

<div class="md:drop-shadow-3"></div>

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

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