CSS masking

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

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

masking (маскировка) — комбинируется с элементом области, затрагивая алфа-канал этого элемента. Части скрытые под маской элемента, полностью или частично прозрачны. Новые спецификации CSS masking направлены для внедрения этих двух операций в мир HTML.

Clip в CSS 2.1

CSS 2.1 давно уже определил свойство clip . Но, у этого свойства есть ограничения, оно применяется только к элементам с абсолютной позицией ( position: absolute; ). Вот как это выглядит:

CSS:



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


HTML:



<img src=
http://pixelcom.crimea.ua/"image.jpg" width="568">


Пример изображения
clip с абсолютной позицией для изображения

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

Свойство clip-path

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

Элемент <clipPath> понимает SVG и использует его для разделения области. Графическими элементами в SVG являются <rect> , <circle> , <ellipse> , <path> , <polygon> , <image> и <text> смотрите статью Руководство по HTML5 SVG . А также <clipPath> позволяет объединить несколько графических элементов. Использовать форму для отсечения области. В следующем примере показано использование <clipPath> :

CSS:



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


HTML:



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

<img src=
http://pixelcom.crimea.ua/"image.jpg" width="568">


Элементарные формы не требуют никакой разметки SVG. Они были добавлены в 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> могут быть анимированы. Следующий пример имеет (звездообразную) форму.

Animation of clipping

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

Вот исходный код для анимации элементарной формы:



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, ...);
  }
}


Masking

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

Маска яркости

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

Альфа-маска

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

Изображение ниже — результат обеих операций маски, описанных выше.

Свойства mask

Свойство mask комбинирует masking изображения со ссылкой на mask следующим образом.

Первый способ состоит в использовании mask-image , mask-repeat , mask-position , mask-clip , mask-origin и mask-size свойства, которые определены подобные их встречной части background с background-image . Как и для фонового изображения, можно определить несколько источников маски.

Каждый источник маски изображения определен в CSS3 . Все источники маски будут объединены, чтобы сформировать отдельное изображение маски. Это изображение маски используется, чтобы маскировать элемент и его содержание как описано выше. Возможные значения изображений — любой формат изображения растрированный, как 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);
}


HTML:



<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>

<img src=
http://pixelcom.crimea.ua/"image.jpg" width="568">


Пример:

Свойства mask-box-image

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



img {
  mask-box-image: url("stamp.svg") 35 repeat;
}


Образец штампа для использования в качестве маски

Это же используются и для изображения маски угла и грани, содержание и результат выглядит так:

Изображения маски с mask-box-image
Изображения маски с mask-box-image

Поддержка браузеров

Все браузеры поддерживают clip , mask и clip-path , как указано в SVG 1.1 для SVG элементов. Но только один браузер позволяет применять свойства элементов HTML: Firefox (вроде). Давайте рассмотрим более подробно.

clip-path и свойства mask со ссылкой на <clipPath> и <mask> элементы работают в Firefox, оба свойства являются unprefixed. С другой стороны, mask-image , mask-box-image и связанных свойств с ними не поддерживаются вообще. Элементарные формы для отсечения не поддерживается.

Браузеры на основе WebKit, как, например, Safari и Chrome, имеют поддержку mask-image , mask-box-image изображений и соответствующих свойств. Всех их, можно применить к элементам HTML, так же оба браузера уже поддерживают префикс -webkit-clip-path для элементарных форм и ссылок <clipPath> .

Если вы хотите попробовать clip и mask , убедитесь, что вы используете префикс и свойства unprefixed. На данный момент свойства unprefixed должны использовать ссылку <mask> или <clipPath> .



<style>
  #image {
    mask: url(#mask);
    -webkit-mask: url(mask.svg) top left / обложка;
    -o-mask: url(mask.svg) top left / обложка;
    -ms-mask: url(mask.svg) top left / обложка;
  }
</style>
  
  <img id="image" src=
http://pixelcom.crimea.ua/"superImage.jpg" width="400">
  
  <svg width="0" height="0">
  <mask id="mask">
    ...
  </mask>
  </svg>


Заключение

Будьте осторожны используя <clipPath> и <mask> в своих проектах, многие браузеры этих фильтров не понимают, или отображают не понятно как! Даже, всеми нами известный и (любимый) браузер IE10

2 комментария на тему “CSS masking”

  1. комментарии

    svg отказывается видеть маску по id, по примеру _http://www.gamespot.com/reviews/destiny-review/1900-6415863/
    Вставляемый код
    PHP код:

    когда вставляю на свою страницу, отображаются одни круги без пробела, указанного в маске.
    Прошу помощи в решении.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>