Маскирование

В компьютерной графике обычно используются две операции clipping и masking. Обе операции скрывают визуальные части элемента. Если Вы работали с SVG или HTML5 Canvas, эти операции для Вас не новые.

Оглавление:
  1. clip
  2. clip-path
  3. Анимация clip-path
  4. mask
  5. Яркость
  6. Прозрачность
  7. Свойства mask
  8. mask-box-image
  9. Поддержка

Сlipping (отсечение) — определяет видимую область объекта, всё что вокруг этой области — не отсекается.

Masking (маскирование) — комбинирует объект и область, затрагивая прозрачность этого элемента. Части скрытые под маской полностью или частично непрозрачны.

Спецификация W3C Clipping, Masking и комбинирование.

Новые спецификации CSS masking направлены для внедрения этих двух операций в HTML, по своему назначению спецификация похожа на CSS Shapes

clip

В CSS 2.1 свойство clip применяется только к элементам с абсолютной позицией position: absolute;.

Вот как это делается:

CSS

img {
  position: absolute;
  clip: rect(10px, 290px, 190px, 10px);
}

HTML

<img src="image.jpg" width="568">

Одна из причин добавления в спецификацию SVG свойство clip-path, оно ограничено только определенными элементами.

к меню ↑

clip-path

Свойство clip-path может быть применено ко всем элементам HTML и SVG. Свойство может ссылаться на элемент <clipPath> или одной из основных форм CSS Exclusions.

SVG использует элемент <clipPath> для разделения области.

Перечень графических объектов в SVG: <rect>, <circle>, <ellipse>, <path>, <polygon>, <image> и <text> смотрите HTML5 SVG.

Элемент <clipPath> позволяет объединить несколько графических объектов и определить форму для отсечения области. В следующем примере в SVG применяется элемент <clipPath>.

CSS

img {
  clip-path: url(#clipping);
}

SVG

<svg>
  <defs>
    <clipPath id="clipping">
      <circle cx="284" cy="213" r="213" />
    </clipPath>
  </defs>
</svg>

HTML

<img src="image.jpg" width="568">

Элементарные фигуры не требуют разметки SVG. Элемент <clipPath> был добавлен для свойства clip-path, чтобы мы могли использовать отсечение.

Простые фигуры для отсечения:

  • rectangle (<top>, <left>, <width>, <height>, <rx>, <ry>) определяет прямоугольник, добавляет два дополнительных параметра радиуса для rounded rects.
  • circle (<cx>, <cy>, <r>) — простой круг с центральной точкой и радиусом.
  • ellipse (<cx>, <cy>, <rx>, <ry>) — эллипс с центральной точкой, горизонтальный и вертикальный радиус.
  • polygon (<x1> <y1>, <x2> <y2>, …, <xn> <yn>) — многоугольник.

Разметка CSS может выглядеть следующим образом:

img {
  clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
}

В следующем примере к изображению применены различные операции отсечения.

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

к меню ↑

Анимация clip-path

Элементарные формы с элементом <mask> могут быть с анимацией.

Наведите курсор на изображение!

Анимации с отсечением при наведении
Анимации с отсечением

CSS

img:hover {
  clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  animate: star 3s;
}

@keyframes star {
  0% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  },
  100% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  }
}
к меню ↑

mask

Вторая операция после отсечения это маскирование. Mask фильтрует видимые части элемента. Дальше я объясню различие между яркостью и прозрачностью маски. Кто хорошо знаком с программой фотошоп, знают что это такое.

к меню ↑

Яркость

Всё просто. Яркость удобный способ выделения конкретных тонов в изображении. Чем светлее часть изображения, тем больше скрыто элементов. Например, черный цвет будет полностью прозрачный, белый указывает полностью непрозрачный, а серый тон указывает частичную непрозрачность.

к меню ↑

Прозрачность

Прозрачность использует тот же самый принцип что и яркость. Различие в том: чем меньше непрозрачная часть изображения, тем меньше видно область.

Изображение ниже — результат обеих операций.

к меню ↑

Свойства mask

Комбинирование свойств mask. Каждый способ определен в CSS3.

Первый способ комбинирования — это объединить свойства: mask-image, mask-repeat, mask-position, mask-clip, mask-origin и mask-size, функциональностью они напоминают background и background-image. Изображение для фона, можно определить несколькими свойствами маски.

Все источники маски будут объединены, чтобы сформировать отдельное изображение. Изображение используется чтобы маскировать элемент и его содержание как описано выше. Изображения должны быть растровые JPG, PNG, можно графические символы SVG или градиенты CSS.

Первый пример маски, может быть реализован с помощью следующего кода:
img {
  mask-image: url(mask.svg);
}
Если источник маски должен быть по размеру содержания, просто используйте обобщающее свойство mask, так, как если бы вы делали это для background:
img {
  mask: url(mask.svg) top left;
}

Второй способ <mask> определен в спецификации SVG 1.1, элемент принимает любые элементы, а также группу графические объектов SVG, чтобы создать маску для изображения.

CSS

img {
  mask: url(#masking);
}

SVG

<svg>
  <defs>
    <linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
      <stop stop-color="black" offset="0"/>
      <stop stop-color="white" offset="1"/>
    </linearGradient>

    <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <rect y="0.3" width="1" height=".7" fill="url(#gradient)" />
      <circle cx=".5" cy=".5" r=".35" fill="white" />
    </mask>
  </defs>
</svg>

HTML

<img src="image.jpg" width="568">
к меню ↑

mask-box-image

Свойство mask-box-image позволяет разделить изображение на центральную часть, четыре угла и четыре грани. Эти части могут быть маской. Функциональные возможности свойства mask-box-image взяты из border-image.

Следующий пример демонстрирует поведение свойства:

img {
  mask-box-image: url("stamp.svg") 35 repeat;
}
Образец штампа для использования в качестве маски
Поведение свойства mask-box-image
Изображения маски с mask-box-image
Результат применения свойства mask-box-image
к меню ↑

Поддержка


Если вы хотите попробовать clip-path и mask, убедитесь, что вы используете префиксы CSS и свойства unprefixed. На данный момент свойства unprefixed должны использовать ссылку <mask> или <clip-path>.
<style>
#image {
  -webkit-mask: url(mask.svg) top left;
      -ms-mask: url(mask.svg) top left;
       -o-mask: url(mask.svg) top left;
          mask: url(#mask);
  }
</style>
  
  <img id="image" src="superImage.jpg" width="400">
  
  <svg width="0" height="0">
  <mask id="mask">
    ...
  </mask>
  </svg>

Смотрите пример маскирования текста на сайте W3C.