Композиция маски

Классы этой группы задают mask-composite — способ, которым слои маски накладываются друг на друга: сложение, вычитание, пересечение или исключение. Берите их, когда маска собирается из нескольких фигур.

Пример

Способы наложения

Маска из двух пересекающихся кругов — два слоя mask-image. Пунктирная рамка показывает границы элемента с маской.

HTML

<div class="grid grid-col-2 sm:grid-col-4 gap-3">
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-two mask-add"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-add</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-two mask-subtract"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-subtract</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-two mask-intersect"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-intersect</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-two mask-exclude"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-exclude</code>
  </div>
</div>

CSS

/* Demo only. The Framework has no class for mask-image, so each example sets
   its own. The mask is inline on purpose: an example renders in a sandboxed
   frame with an opaque origin, and a mask image is fetched in CORS mode, so a
   file from the site is refused and the masked element disappears with it. */
.demo-mask-two {
  -webkit-mask-image: radial-gradient(circle at 38% 50%, #000 30%, transparent 31%), radial-gradient(circle at 62% 50%, #000 30%, transparent 31%);
  mask-image: radial-gradient(circle at 38% 50%, #000 30%, transparent 31%), radial-gradient(circle at 62% 50%, #000 30%, transparent 31%);
}

Классы

Класс	CSS	Значения
`mask-add`	`mask-composite: add`	—
`mask-subtract`	`mask-composite: subtract`	—
`mask-intersect`	`mask-composite: intersect`	—
`mask-exclude`	`mask-composite: exclude`	—

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Классы маски не задают саму маску: изображение маски (mask-image) задаётся в CSS проекта, как в примерах на этой странице. Слои перечисляются в mask-image через запятую; наложение действует, только когда слоёв больше одного.

Способы

Класс	Элемент виден
`mask-add`	там, где есть хотя бы один слой — значение по умолчанию
`mask-subtract`	там, где есть верхний слой, но нет нижнего
`mask-intersect`	только там, где слои пересекаются
`mask-exclude`	там, где есть ровно один слой

CSS

.two-circles {
  -webkit-mask-image: radial-gradient(circle at 38% 50%, #000 30%, transparent 31%),
    radial-gradient(circle at 62% 50%, #000 30%, transparent 31%);
  mask-image: radial-gradient(circle at 38% 50%, #000 30%, transparent 31%),
    radial-gradient(circle at 62% 50%, #000 30%, transparent 31%);
}

HTML

<div class="two-circles mask-exclude">…</div>

Ограничения

Вместе с mask-composite классы задают -webkit-mask-composite со значениями WebKit для браузеров, которые знают маску только с префиксом.
У семейства нет префиксов ширины экрана и состояния.

Навигация

Главное

Документация

Содержание