Фон в оттенках серого элемента

backdrop-filter-grayscale
sm
md
lg
xl
hover

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

Классы

Класс Значение
backdrop-grayscale-none backdrop-backdrop-filter: grayscale(0)
backdrop-grayscale backdrop-backdrop-filter: grayscale(1)

Описание

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

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

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

Пример

<div class="backdrop-grayscale-none">
    <!-- ... -->
</div>
<div class="backdrop-grayscale">
    <!-- ... -->
</div>

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

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

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

<div class="md:backdrop-grayscale"></div>

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

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