Область маски

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

Пример

Области

Сплошная маска на элементе с прозрачной рамкой и внутренним отступом. Пунктирная рамка показывает границы элемента с маской.

HTML

<div class="grid grid-col-2 sm:grid-col-3 lg:grid-col-5 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-solid mask-border"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-border</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-solid mask-padding"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-padding</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-solid mask-content"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-content</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-solid mask-none"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-none</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="flex items-center justify-center h-e4 radius-1 border border-dashed border-outline-variant">
      <div class="text-8 weight-8 demo-mask-text mask-text">Маска</div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-text</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-solid {
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
  border: 1rem solid transparent;
  padding: 1rem;
}
.demo-mask-text {
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
  background-image: linear-gradient(90deg, var(--sf-primary), var(--sf-tertiary));
}

Классы

Класс	CSS	Значения
`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; -webkit-text-fill-color: transparent`	—
`mask-none`	`mask-clip: no-clip`	—

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

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

Применение

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

Какую область выбрать

Класс	Элемент виден в пределах
`mask-border`	рамки — значение по умолчанию
`mask-padding`	внутреннего отступа, без рамки
`mask-content`	содержимого, без отступа и рамки
`mask-none`	маски без обрезки
`mask-text`	букв текста элемента
`mask-fill`, `mask-stroke`, `mask-viewbox`	области заливки, обводки или `viewBox` элемента SVG

Фон сквозь текст

mask-text обрезает маску по буквам и делает их заливку прозрачной: сквозь текст виден фон элемента.

CSS

.gradient-title {
  background-image: linear-gradient(90deg, var(--sf-primary), var(--sf-tertiary));
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
}

HTML

<h2 class="gradient-title mask-text">Заголовок</h2>

Ограничения

mask-margin задаёт значение margin-box, которого нет у свойства mask-clip: браузер отбрасывает объявление, и маска обрезается по рамке, как с mask-border.
Значение text есть только у свойства с префиксом -webkit-mask-clip. В браузере без него маска не обрезается по буквам, а текст всё равно остаётся прозрачным — проверьте mask-text в нужных браузерах.
mask-fill, mask-stroke и mask-viewbox относятся к элементам SVG; у элемента HTML они действуют как mask-border.
У семейства нет префиксов ширины экрана и состояния.

Навигация

Главное

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

Содержание