Яркость элемента
filter-brightness
sm
md
lg
xl
В SIMAI Framework с помощью модификатора можно управлять яркостью элемента.
Классы
| Класс | Значение |
|---|---|
brightness-0 |
filter: brightness(0) |
brightness-1 |
filter: brightness(0.5) |
brightness-2 |
filter: brightness(0.75) |
brightness-3 |
filter: brightness(0.9) |
brightness-4 |
filter: brightness(0.95) |
brightness-5 |
filter: brightness(1) |
brightness-6 |
filter: brightness(1.1) |
brightness-7 |
filter: brightness(1.25) |
brightness-8 |
filter: brightness(1.5) |
brightness-9 |
filter: brightness(2) |
Описание
Адаптивный модификатор. Позволяет управлять яркостью элемента, в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
-
brightness-0...brightness-9- уровень яркости элемента.
-
Пример
<div class="brightness-0"><!-- ... --></div>
<div class="brightness-1"><!-- ... --></div>
<div class="brightness-2"><!-- ... --></div>
<div class="brightness-3"><!-- ... --></div>
<div class="brightness-4"><!-- ... --></div>
<div class="brightness-5"><!-- ... --></div>
<div class="brightness-6"><!-- ... --></div>
<div class="brightness-7"><!-- ... --></div>
<div class="brightness-8"><!-- ... --></div>
<div class="brightness-9"><!-- ... --></div>
Адаптивность
Для установки яркости элементов, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl)через двоеточие (:) к любому модификатору яркости.
Например, используйте модификатор md:brightness-3 для установки яркости элементов для экранов размером Medium и больше.
<div class="md:brightness-3"></div>Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.