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