Вложение маски

mask-origin

В SIMAI Framework с помощью модифкаторов можно устанавливать источник маски.

Классы

Класс Значение
mask-origin-content mask-origin: content-box;
mask-origin-padding mask-origin: padding-box;
mask-origin-margin mask-origin: margin-box;
mask-origin-border mask-origin: border-box;
mask-origin-fill mask-origin: fill-box;
mask-origin-stroke mask-origin: stroke-box;
mask-origin-viewbox mask-origin: view-box;

Описание

Адаптивный модификатор. Задаетобласть расположения фона в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • mask-origin-content - положение маски определяется относительно контента;
    • mask-origin-padding - положение маски определяется относительно внутренних отступов padding;
    • mask-origin-margin - положение маски определяется относительно внешних отступов margin;
    • mask-origin-border - положение маски определяется относительно свойства border-width;
    • mask-origin-fill - положение маски определяется относительно рамки объекта svg-элемента;
    • mask-origin-stroke - положение маски определяется относительно рамки, ограничивающей обводку svg-элемента;
    • mask-origin-viewbox - положение маски определяется относительно размеров view-box svg-элемента;

mask-origin-content

Используйте модификатор mask-origin-content положение маски определяется относительно контента.

<div class="mask-origin-content"></div>

mask-origin-padding

Используйте модификатор mask-origin-padding положение маски определяется относительно внутренних отступов padding.

<div class="mask-origin-padding"></div>

mask-origin-margin

Используйте модификатор mask-origin-margin положение маски определяется относительно внешних отступов margin.

<div class="mask-origin-margin"></div>

mask-origin-border

Используйте модификатор mask-origin-border положение маски определяется относительно свойства border-width.

<div class="mask-origin-border"></div>

mask-origin-fill

Используйте модификатор mask-origin-fill положение маски определяется относительно рамки объекта svg-элемента.

<div class="mask-origin-fill"></div>

mask-origin-stroke

Используйте модификатор mask-origin-stroke положение маски определяется относительно рамки, ограничивающей обводку svg-элемента.

<div class="mask-origin-stroke"></div>

mask-origin-viewbox

Используйте модификатор mask-origin-viewbox положение маски определяется относительно размеров view-box svg-элемента.

<div class="mask-origin-viewbox"></div>

Адаптивность

Для управления источником маски, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору выравнивания элементов флексбокса по основной оси.

Например, используйте модификатор md:mask-origin-content для маски относительно области просмотра для экранов размером Medium и больше.

<div class="md:mask-origin-content"></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью