Как применять 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.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Предположим, что у нас есть следующий кусочек кода SVG:

Вы можете просто создать произвольную фигуру, используя сервис CSS Path Generator, который либо сгенерирует SVG-код для его последующей вставки на вашу страницу, или вы даже можете скачать SVG-файл, если захотите воспользоваться им.

Как видите, SVG-код содержит обычный ID, который потребуется нам для дальнейшего обращения к элементу в CSS. Чтобы отсечь простое изображение, используя для этого SVG, нам нужно использовать свойство clip-path, а затем вызвать функцию url():

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

Посмотреть, как это работает, вы можете в созданном мной примере

Маскировка

Этот инструмент носит больше экспериментальный характер, и, следовательно, его немного сложнее тестировать. Но, вероятно, он станет доступным для всех браузеров, как только люди начнут пользоваться им в Chrome и Safari.

Маскировка работает точно так же, как и в программе Photoshop: изображение или градиент используются в качестве фильтра для некоторых частей вашего изображения. Для этого мы будем использовать свойство mask-image и ссылку на SVG-файл, например, так:

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

Автор: Sara Vieira

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

Получить

Метки: , ,

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree