Область маски
mask-clip
В SIMAI Framework с помощью модифкаторов можно управлять областью на которую влияет маска другими словами содержимое блока должно быть ограничено этой областью.
Классы
| Класс | Значение |
|---|---|
mask-content |
mask-clip: content-box; |
mask-padding |
mask-clip: padding-box; |
mask-margin |
mask-clip: margin-box; |
mask-border |
mask-clip: border-box; |
mask-fill |
mask-clip: fill-box; |
mask-stroke |
mask-clip: stroke-box; |
mask-viewbox |
mask-clip: view-box; |
mask-text |
mask-clip: text; |
mask-none |
mask-clip: no-clip; |
Описание
Адаптивный модификатор. Управляет отображением фона под границами блока в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
mask-content- обрезка области производится по контенту блока, без учета свойств margin, padding, border-width;mask-padding- обрезка области производится по внутренним отступам (padding) блока;mask-margin- обрезка области производится по внешним отступам (margin) блока;mask-border- обрезка области производится по границам блока;mask-fill- обрезка области производится по ограничивающему объекту (svg);mask-stroke- обрезка области производится по рамке ограничивающего объекта (svg);mask-viewbox- обрезка области производиться по ближайшему SVG viewport (svg);mask-text- обрезка области производится по тексту блока;mask-none- обрезка области не производиться;
mask-content
С помощью модификатора mask-content обрезка области производится по контенту блока, без учета свойств margin, padding, border-width.
<div class="mask-content"></div>mask-padding
С помощью модификатора mask-padding обрезка области производится по внутренним отступам (padding) блока.
<div class="mask-padding"></div>mask-margin
С помощью модификатора mask-margin обрезка области производится по внешним отступам (margin) блока.
<div class="mask-margin"></div>mask-border
С помощью модификатора mask-border обрезка области производится по границам блока.
<div class="mask-border"></div>mask-fill
С помощью модификатора mask-fill обрезка области производится по ограничивающему объекту (svg).
<div class="mask-fill"></div>mask-stroke
С помощью модификатора mask-stroke обрезка области производится по рамке ограничивающего объекта (svg).
<div class="mask-stroke"></div>mask-viewbox
С помощью модификатора mask-viewbox обрезка области производиться по ближайшему SVG viewport (svg).
<div class="mask-viewbox"></div>mask-text
С помощью модификатора mask-text обрезка области производится по тексту блока.
mask-text
Hello world
<div class="mask-text">Hello world</div>mask-none
С помощью модификатора mask-none обрезка области не производиться.
<div class="mask-none"></div>Адаптивность
Для управления поведения фонового изображения при прокрутке, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору выравнивания элементов флексбокса по основной оси.
Например, используйте модификатор md:bg-fixed для фиксации фонового изображения относительно области просмотра для экранов размером Medium и больше.
<div class="md:bg-fixed"></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.