От автора: Технология CSS постоянно совершенствуется, и в ней появляются новые инструменты. В этой статье я расскажу об одной новой возможности: отсечении (clipping) с помощью свойства clip-path и маскировке (masking).
clip-path и masking – это два свойства, немного раздвигающие границы нашего текущего представления о блочной модели (box model).
Браузерная поддержка
К счастью, имеется довольно хорошая браузерная поддержка для свойства clip-path. Данное свойство поддерживается всеми десктопными версиями браузеров вплоть до IE9 (хотя, как мы увидим далее, некоторые старые версии браузеров требуют добавления вендорных префиксов). Единственной настоящей проблемой в данном плане является мобильная версия IE (IE Mobile).
Однако ситуация сильно отличается относительно инструмента маскировки. В настоящий момент его поддерживают только браузеры Chrome и Safari, и для них необходимо использовать вендорный префикс (-webkit-).
Отсечение с помощью SVG
В CSS 2 уже было свойство clip, но данное свойство позволяет нам производить отсечение лишь прямоугольных форм. Важная новость заключается в том, что с помощью свойства clip-path мы теперь можем отсекать изображения, используя многоугольники в SVG.
Предположим, что у нас есть следующий кусочек кода SVG:
|
1 2 3 4 5 6 |
<svg width="0" height="0"> <clipPath id="clipPolygon"> <polygon points="99 143,300 293,522 143,302 -5,300 -7"> </polygon> </clipPath> </svg> |
Вы можете просто создать произвольную фигуру, используя сервис CSS Path Generator, который либо сгенерирует SVG-код для его последующей вставки на вашу страницу, или вы даже можете скачать SVG-файл, если захотите воспользоваться им.
Как видите, SVG-код содержит обычный ID, который потребуется нам для дальнейшего обращения к элементу в CSS. Чтобы отсечь простое изображение, используя для этого SVG, нам нужно использовать свойство clip-path, а затем вызвать функцию url():
|
1 2 3 |
img { clip-path: url(#clipPolygon); } |
В данном случае SVG-файл содержит только один многоугольник, поэтому мы можем воспользоваться сокращенной формой записи, т.е. функцией polygon() и просто вставить туда имеющиеся у нас координаты из SVG-файла:
|
1 2 3 |
img { clip-path: polygon(99px 143px,300px 293px,522px 143px,302px -5px,300px -7px); } |
Оба примера работают абсолютно одинаково. Единственное отличие заключается в том, что второй подход не требует использования HTML-разметки. Вместе с функцией polygon можно также использовать переходы (transitions):
|
1 2 3 4 5 6 7 |
.clip{ -webkit-clip-path: polygon(195px 147px,295px 297px,395px 147px,295px -3px); transition: 1s all ease; } .clip:hover{ -webkit-clip-path: polygon(82px 148px,295px 297px,496px 147px,295px -3px); } |
Посмотреть, как это работает, вы можете в созданном мной примере
Маскировка
Этот инструмент носит больше экспериментальный характер, и, следовательно, его немного сложнее тестировать. Но, вероятно, он станет доступным для всех браузеров, как только люди начнут пользоваться им в Chrome и Safari.
Маскировка работает точно так же, как и в программе Photoshop: изображение или градиент используются в качестве фильтра для некоторых частей вашего изображения. Для этого мы будем использовать свойство mask-image и ссылку на SVG-файл, например, так:
|
1 2 3 |
img { -webkit-mask-image: url("mask.svg"); } |
Такая запись сообщит браузеру о том, что нужно найти указанный SVG-файл и использовать его в качестве маски для изображения. Если хотите, можете использовать ID SVG-элемента:
|
1 2 3 |
img { -webkit-mask: url(#masking); } |
Автор: Sara Vieira
Источник: //www.developerdrive.com/
Редакция: Команда webformyself.
