Вращение оттенка фона элемента
backdrop-filter-hue-rotate
sm
md
lg
xl
hover
В SIMAI Framework с помощью модификатора можно управлять вращением оттенка фона элемента.
Классы
| Класс | Значение |
|---|---|
backdrop-hue-rotate-0 |
backdrop-filter: hue-rotate(0deg) |
backdrop-hue-rotate-1 |
backdrop-filter: hue-rotate(15deg) |
backdrop-hue-rotate-2 |
backdrop-filter: hue-rotate(30deg) |
backdrop-hue-rotate-3 |
backdrop-filter: hue-rotate(60deg) |
backdrop-hue-rotate-4 |
backdrop-filter: hue-rotate(90deg) |
backdrop-hue-rotate-5 |
backdrop-filter: hue-rotate(180deg) |
Описание
Адаптивный модификатор. Позволяет управлять вращением оттенка фона элемента, в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
backdrop-hue-rotate-0...backdrop-hue-rotate-5- уровень поворота оттенка элемента.
Пример
<div class="backdrop-hue-rotate-0"><!-- ... --></div>
<div class="backdrop-hue-rotate-1"><!-- ... --></div>
<div class="backdrop-hue-rotate-2"><!-- ... --></div>
<div class="backdrop-hue-rotate-3"><!-- ... --></div>
<div class="backdrop-hue-rotate-4"><!-- ... --></div>
<div class="backdrop-hue-rotate-5"><!-- ... --></div>
Адаптивность
Для установки вращения оттенка фона элементов, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору вращения оттенка фона.
Например, используйте модификатор md:backdrop-hue-rotate-3 для установки поворота оттенка элементов для экранов размером Medium и больше.
<div class="md:backdrop-hue-rotate-3"></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.