Как применять CSS-инструменты отсечение и маскировка

Как применять CSS-инструменты отсечение и маскировка

От автора: Технология 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:

<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():

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

В данном случае SVG-файл содержит только один многоугольник, поэтому мы можем воспользоваться сокращенной формой записи, т.е. функцией polygon() и просто вставить туда имеющиеся у нас координаты из SVG-файла:

img {
 clip-path: polygon(99px 143px,300px 293px,522px 143px,302px -5px,300px -7px);
}

Оба примера работают абсолютно одинаково. Единственное отличие заключается в том, что второй подход не требует использования HTML-разметки. Вместе с функцией polygon можно также использовать переходы (transitions):

.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-файл, например, так:

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

Такая запись сообщит браузеру о том, что нужно найти указанный SVG-файл и использовать его в качестве маски для изображения. Если хотите, можете использовать ID SVG-элемента:

img {
 -webkit-mask: url(#masking);
 }

Автор: Sara Vieira

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

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

Комментарии 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