Размытие элемента
filter-blur
sm
md
lg
xl
hover
В SIMAI Framework с помощью модификатора можно управлять размытием элемента.
Классы
| Класс | Значение |
|---|---|
blur-0 |
filter: blur(var(--sf-0)) |
blur-1 |
filter: blur(var(--sf-a1)) |
blur-2 |
filter: blur(var(--sf-a2)) |
blur-3 |
filter: blur(var(--sf-a4)) |
blur-4 |
filter: blur(var(--sf-a8)) |
blur-5 |
filter: blur(var(--sf-b6)) |
blur-6 |
filter: blur(var(--sf-c2)) |
blur-7 |
filter: blur(var(--sf-c6)) |
Описание
Адаптивный модификатор. Позволяет управлять размытием элемента, в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
-
blur-0...blur-7- уровень размытия.
-
Пример
<div class="blur-0"><!-- ... --></div>
<div class="blur-1"><!-- ... --></div>
<div class="blur-2"><!-- ... --></div>
<div class="blur-3"><!-- ... --></div>
<div class="blur-4"><!-- ... --></div>
<div class="blur-5"><!-- ... --></div>
<div class="blur-6"><!-- ... --></div>
<div class="blur-7"><!-- ... --></div>
Адаптивность
Для установки размытия элементов, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору размытия.
Например, используйте модификатор md:blur-3 для установки размытия по умолчанию элементов для экранов размером Medium и больше.
<div class="md:blur-3"></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.