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