Маски CSS

Маски CSS

От автора: две часто применяемые операции в компьютерной графике – это обрезка (clip) и наложение маски (mask). Обе операции скрывают видимые части элемента. Если вы до этого работали с SVG или HTML Canvas, то они, скорее всего, не новы для вас. Обрезка определяет видимую область элемента. Все, находящееся вокруг этой области, не видно – оно «отсекается». При наложении маски изображение-маска компонуется с элементом, влияя на альфа-канал этого элемента. Детали элемента с наложенной маской становятся полностью или частично прозрачными. Новая спецификация CSS Masking ставит своей целью укоренить эти две операции в мире HTML.

Обрезка в CSS 2.1

CSS 2.1 уже занесли в спецификации свойство clip. Оно ограничено до прямоугольной обрезки с помощью функции rect(), принимающей четыре аргумента расстояния для верхнего, правого, нижнего и левого краев. Раздражает следующее: свойство clip применяется исключительно к абсолютно позиционированным элементам. В других элементах оно просто игнорируется.

img {
  position: absolute;
  clip: rect(10px, 290px, 190px, 10px);
}
<img src="image.jpg" width="568">

Свойство clip также ограничено до определенных элементов в SVG. Это причина того, почему спецификация SVG добавила свойство clip-path, которое сейчас адаптировано к CSS Masking.

Свойство clip-path

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

Элемент берет любой графический элемент из SVG и использует их как область отсечения. Графические элементы в SVG – это rect, circle, ellipse, path, polygon, image и text. clipPath также дает возможность объединять множество графических элементов. Комбинация всех фигур затем используется как область отсечения. Применение clipPath демонстрирует следующий пример:

img {
  clip-path: url(#clipping);
}
<svg>
  <defs>
    <clipPath id="clipping">
      <circle cx="284" cy="213" r="213" />
    </clipPath>
  </defs>
</svg>

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

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

rectangle(top, left, width, height, rx, ry) определяет прямоугольник, аналогично функции rect() для clip, и добавляет два опциональных параметра радиуса для скругленных прямоугольников.

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

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

Но обрезка также очень нужно для дизайна UI. В следующем примере V-шеврон обозначает продолжающийся список.

Заметьте, что clip-path (а также clip) отсекают любой аспект элемента, включая фоны, края и любые механизмы прокрутки.

Анимация clip-path

Как базовые фигуры, так и содержимое элемента mask можно анимировать. В следующем примере – анимация в форме звезды:

Вот исходный код анимации базовой фигуры:

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

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

Вторая операция после обрезки – это наложение маски. Изображение-маска применяется как некий вид «цветовой сетки» для фильтрации видимых частей элемента. В следующих абзацах я объясню разницу между двумя типами маски: цветовой насыщенности и альфа-маской.

Маска цветовой насыщенности

Для маски цветовой насыщенности изображение-маска сначала превращается в растеризованное изображение шкалы яркости (если оно уже не в шкале яркости). Чем «светлее» часть изображения-маски, тем больше в данном месте будет видно элемента под наложенной маской. Например, черный означает полную прозрачность, белый означает полную непроницаемость и серый тон означает частичную прозрачность элемента.

Альфа-маска

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

Резюме: оба вида наложения масок влияют на уровень прозрачности элемента. Изображение внизу – результат обеих операций наложения масок.

Спецификация CSS Masking определяет две сокращенных записи свойства наложения масок: mask и mask-box-image.

Свойство mask

Свойство mask сочетает наложение маски на изображение со ссылкой на маску как описано ниже.

Первый способ – применение свойств mask-image, mask-repeat, mask-position, mask-clip, mask-origin и mask-size, которые устанавливаются аналогично их эквиваленту background с background-image. Как для background-image, можно определить множество источников маски. Каждая маска-источник – это изображение, определенное изображениями CSS3 (CSS3 Images). Все источники комбинируются для формирования одного изображения. Оно используется для наложения маски на элемент и его содержимое, как описано выше. Возможные значения изображений — это любые растровые форматы изображений, вроде JPG или PNG, графика SVG или предустановленные значения изображений, как градиенты CSS.

Первый вышеприведенный пример наложения маски можно просто реализовать при помощи следующего кода:

img {
  mask-image: url(mask.svg);
}

Если маску-источник нужно растянуть до размера содержимого, просто примените сокращенное свойство mask, как вы сделали бы это для фона с помощью сокращенной записи свойства background:

img {
  mask: url(mask.svg) top left / cover;
}

Второй способ обращается к элементу mask, как это определено в SVG 1.1. Элемент mask принимает любой графический элемент, а также сгруппированные элементы из SVG, и применяет их для создания изображения-маски.

img {
  mask: url(#masking);
}
<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="image.jpg" width="568">

Что будет смотреться, как следующее изображение:

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

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

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

Следующее изображение используется как маска и поделено на девять частей:

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

Браузерная поддержка

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

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

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

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

<style>
  #image {
    mask: url(#mask);
    -webkit-mask: url(mask.svg) top left / cover;
    -o-mask: url(mask.svg) top left / cover;
    -ms-mask: url(mask.svg) top left / cover;
  }
</style>

<img id="image" src="coolImage.jpg" width="400">

<svg width="0" height="0">
  <mask id="mask">
    ...
  </mask>
</svg>

Но будьте осторожны, у других браузеров еще нет функциональности наложения маски или отсечения для элементов HTML.

Автор: Dirk Schulze

Источник: http://www.html5rocks.com/

Редакция: Команда webformyself.

Учебник по основам CSS для начинающих

Прямо сейчас изучи CSS с нуля!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

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

Я не робот.

Spam Protection by WP-SpamFree