Создание интерактивных эффектов с помощью CSS clip path

Создание интерактивных эффектов с помощью CSS clip path

От автора: помните, как в детстве вы вырезали картинки из журналов? Вы клеили их на бумагу и создавали коллажи? Этот пост посвящен вырезанию изображений в вебе с помощью свойства clip-path CSS. Мы узнаем, как проводить вырезку, а также как с помощью вырезанных частей создавать интересные эффекты, комбинируя части с оригинальным изображением.

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

Создание интерактивных эффектов с помощью CSS clip path

Создание SVG

Во-первых, давайте создадим SVG файл и импортируем наше изображение в него. Для вырезания вам потребуется редактор векторных изображений. Я буду работать в Inkscape, бесплатном open source редакторе, но вы можете использовать Adobe Illustrator или даже онлайн редактор типа Vectr.

Сначала создадим квадрат 100px в SVG документе. Сторона квадрата должна быть именно 100px, так как clip path работает в процентах. Масштаб 0-100 позволит конвертировать пиксели в проценты.

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

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

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

Прежде чем продолжим, давайте проверим выходной SVG код из редактора. Код будет меняться в зависимости от приложения. Например, в Illustrator есть только два метода. Разметка даст нам понять, что приложение делает на фоне, так как не все приложения экспортируют SVG одинаково. Посмотрев код, вы лучше поймете разметку.

Выходной SVG будет примерно таким:

<svg … width="100px" height="100px" viewBox="0 0 100 100" …>
 ...
</svg>

Один из главных моментов в коде выше – атрибут viewBox – это внутренняя система координат SVG документа. По ссылке вы найдете подробное объяснение того, как работает этот атрибут. В коде установлены правильные свойства width и height, а viewBox растягивается от 0 до 100.

Далее необходимо импортировать изображение. Здесь нам нужно изменить размер изображения до квадрата 100px и поместить его в начало координат (0, 0). Изменение размера нарушит соотношение сторон, если оно ранее не имело форму квадрата. В нашем примере изображение прямоугольное. Однако это не помешает нам при использовании clip-path.

Создание интерактивных эффектов с помощью CSS clip path

Взглянем еще раз на сгенерированный код. Теперь там появился тег . Обратите внимание, что атрибут preserveAspectRatio задан в none. Значение атрибута говорит нам, что оригинальный размер изображения будет игнорироваться.

<svg … width="100px" height="100px" viewBox=“0 0 100 100”>
 ...
  <image … y="0" x="0" xlink:href=".../image-file-name.jpg" preserveAspectRatio="none" height="100"
width="100" … />
 ...
</svg>

Маскирование файла изображения

Перейдем к обрезанию картинки.

Концепция обрезания изображений называется маскирование. Если вы не знаете, что такое маскирование, это рисование замкнутой формы с помощью пера вокруг изображения. Вам не нужно хорошо знать векторные редакторы для этого. От вас не требуется определенных артистических навыков, маскирование можно выполнить за несколько простых шагов.

Маскирование цифровых изображений очень похоже на вырезание изображений из настоящих журналов. Созданный путь в векторном редакторе совпадает с путем ножниц. Выберите инструмент перо и начните рисовать линию вокруг той части изображения, которую хотите вырезать. В нашем случае это цветок, фокус изображения. Во время создания маски можете создавать сколь угодно много точек по пути. Последняя точка должна замыкать путь.

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

Если теперь посмотреть SVG код, то там будет путь со всеми координатами нарисованной фигуры. Сокращенный пример моего пути:

...
 <path
  d="m 52.843605,79.860084 -0.69448,1.767767 -0.883884,0 -1.26269,-1.578364 -0.757615,0.06314 -1.388959,-2.714785 -0.12627,-2.967323 -1.704632,2.525381 -1.136422,-0.126269 -0.505076,-2.841054 -1.515229,1.325825 -1.325825,-0.126269 -0.252538,-1.578363 -0.947018,-0.126269 -0.252538,-0.315673 -0.947018,0.126269 -0.69448,-0.757614 0.126269,-1.641498 -0.441942,-0.252538 -0.189403,-2.588516 -0.505077,-0.06314 -1.010152,0.568211 -0.568211,-1.452094 0.441942,-2.399112 -1.325825,-0.126269 -0.378808,-1.262691 0.378808,-2.08344 0.883883,-1.641498 -1.010152,-1.26269 0.505076,-1.957171 -1.452094,-1.010152 -0.378808,-1.010153 1.136422,-2.209709 -2.209709,-0.378807 -0.441941,-1.704632 0.631345,-2.020305 1.704632,-1.38896 -1.578363,-1.452094 0.568211,-2.462247 0.820749,-0.441942 0.126269,-1.515229 0.757614,-1.073287 0.441942,-1.515228 -0.505076,-1.38896 0,-2.272843 0.505076,-1.010153 1.136422,-0.505076 1.325825,0 0.06313,-0.568211 -0.947018,-2.08344 0.378807,-0.631345 0,-0.441942 1.073288,-0.69448 1.073287,0 0.56821,0.315673 -0.189403,-2.525381 0.189403,-0.883884 0.378808,0.757615 0.06313,-0.883884 0.378807,-0.378807 0.189404,-0.378807 0.126269,-2.08344 0.315673,0.06314 0,-0.568211 0.378807,-0.06313 1.199556,0.568211 0.505076,0.69448 0.252538,-2.08344 0.631346,-0.505076 0.631345,-0.568211 0.441942,-0.505076 0.252538,0.505076 0,-0.883883 1.262691,0.315673 0.820749,-1.894036 1.325825,1.136421 1.073287,-1.452094 0.820749,0.189403 1.010152,1.515229 0.505077,0.757615 0.631345,-1.452095 0.820749,-0.56821 0.820749,0.505076 0.378807,0.631345 0.820749,-0.189403 0.820749,0.947018 0,0.252538 0.69448,-0.126269 0.378807,0.631345 0.820749,0 0.568211,1.515229 0.378807,1.325825 0.505076,-0.189404 0.252538,0.441942 0.378808,0.126269 0.441941,2.08344 0,0.568211 0.505077,-0.126269 0,0.883883 0.694479,-0.252538 0.505077,0.505076 0.252538,0.947018 0,0.883884 0.315673,0 0.378807,0.631345 0.441941,0.631345 0.06314,1.515229 -0.378807,1.957171 -0.441942,1.767767 2.904189,-1.136422 0.252538,0.631345 0.126269,2.209709 -0.883884,1.830902 1.38896,0.378807 1.010153,1.199556 -0.378808,1.641498 -0.947018,1.767767 -0.505076,0.378807 0.69448,1.767767 1.010153,1.26269 0.378807,1.38896 -0.378807,1.515229 -0.568211,0.315673 -0.505077,1.010152 -1.452094,0.883884 0.189404,1.325825 0.315672,0.883883 -0.378807,1.38896 -1.388959,1.073287 -0.505077,0.126269 0,0.505077 -0.189403,1.830901 -1.010153,0.631345 0.820749,2.209709 -0.631345,1.452094 -1.641498,-0.189403 0.126269,1.578363 -0.315673,1.641498 -1.073287,0.505076 -0.378807,0.315673 -0.378807,0.883883 -0.252538,1.010153 0.06313,2.714785 -0.631345,0.631345 -1.578364,-0.883883 -0.757614,-1.262691 -0.189404,2.462247 0.189404,2.083439 -0.252538,2.588516 -0.441942,1.894036 -0.631345,0.631346 -0.631345,-0.189404 -0.820749,-0.883883 z"
 />
 ...

Ниже показано видео того, как я вырезаю цветок и результат. Вырезание заняло около двух минут, а результат приличный.

Ниже мое изображение с небольшой прозрачностью маски – так видна вырезанная форма.

Создание интерактивных эффектов с помощью CSS clip path

Преобразование SVG в CSS clip path

У нас есть маска. Теперь давайте узнаем, как перевести SVG в clip-path. То есть нам необходимо конвертировать дескриптор пути или атрибут d в коде SVG.

Прежде чем перейти к преобразованию, давайте поговорим о том, зачем использовать clip path. Вы можете спросить, а зачем мы вообще используем clip path? Почему не сделать маску в векторном редакторе и не вставить заранее обрезанное изображение? Потому что так можно, а также работать с изображением удобнее, чем с большим CSS кодом. Я вижу два основных преимущества в использовании clip path: интерактивность и сжатие. SVG – это код в DOM, которым можно манипулировать, а размер файла намного меньше, чем у растрового изображения той же формы.

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

Я написал устаревший Node скрипт, конвертирующий SVG пути. Он принимает пути в относительных координатах и выводить соответствующие полигоны с помощью CSS clip-path. Скрипт парсит SVG файлы с помощью регулярного выражения. Можете поиграться и создать что-то получше. Что можно сразу добавить – нормализацию пропорций. Нормализация позволит использовать изображения любой формы при создании масок, а не только квадраты.

Результат применения clip path к фото цветка:

Трюки с CSS clip path

Мы вырезали изображение, теперь давайте разберем, что с ним можно делать.

Эффект наложения

Один из трюков – расположение вырезанной части поверх оригинального изображения. Ниже представлено демо, где вырезанная часть накладывается на оригинал. Так вы поймете идею позиционирования и то, что тут 2 разные части. 2 части позволяют применять эффекты как к переднему плану, так и к заднему.

Эффект подсветки

Подсвеченные части на изображении не только визуально привлекательны, но и воздействуют на UX пользователя. Нетрудно придумать сценарии, когда необходимо выделить части изображения на веб-странице. Один из таких примеров – подсветка отмеченных на фото людей. Другой пример – подсветка отдельных функций товара в демонстрации. Третий пример – карта, на которой нужно подсветить места, о которых выводится информация. Подсветка или визуальное ударение частей UI при правильном применении может быть мощным UX шаблоном. Clip path – один из способов выделения UI.

Вернемся к фото цветка. Теперь мы можем с легкостью подсветить цветок. Один из способов – занизить тон фона, снизив прозрачность.

Интересно то, что браузер проверит маску. Поэтому чтобы сделать эффект более привлекательным, мы можем подсвечивать цветок только, когда пользователь наводит на него курсор. Один из способов – добавить JS обработчик события (addEventListener) и прицепить его к маскированному элементу. Прицепив обработчики на события типа mouseenter и mouseout, вы привлечете пользователя, когда тот будет наводить курсор на цветок. Эффект можно включать, даже просто переключая классы при наведении мыши. Нам понадобится плавный переход CSS opacity.

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

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

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

Мы можем использовать эту технику несколько раз в изображении. Пример подсветки разных людей на фото. В этом примере вырезаны разные люди:

Эффекты затухания и размытия

Последний год нам все чаще встречался эффект размытого заднего фона. Это обратный способ усиления элементов переднего плана. Вместо усиления элементов переднего плана, эффект можно достичь путем размытия заднего плана. У такого способа усиления элементов переднего плана есть приятный эффект – элемент в фокусе остается нетронутым. Но в то же время он становится более заметным.

Самый легкий способ создать размытие – через CSS фильтр blur. В демо ниже используется тот же JavaScript колбек, что и в предыдущем примере, для размытия при наведении. Вместо уменьшения прозрачности здесь плавно размывается задний план.

Плавный переход на CSS фильтре сильно бьет по производительности. Это связано с тем, что для создания эффекта размытия используется шейдер на GPU. Анимировать CSS blur не самая хорошая идея. Лучше использовать заранее размытое изображение и эффект затухания. Другими словами, мы анимирует прозрачность дублирующего фона вместо создания анимации. Как это выглядит:

Обводка

Другой способ усилить вырезанный элемент – использовать обводку. Обводку можно легко создать, повторно использовав маску. Если вставить SVG между двух главных элементов и добавить небольшой масштаб (1.04), появится обводка.

Мы можем добавлять обводку по событию hover, как в других примерах:

Края маски слегка резкие, так как она двойная. Один из способов смягчить края – добавить SVG фильтр. Пример:

Вырезание отверстий

Что делать, если в вырезанной части есть отверстия? Что если эта часть показывает задний фон в этом отверстии, который вы хотели бы удалить?

Например, вы хотите вырезать пончик. И вам нужна маска, исключающая отверстие в середине. Как вырезать маску? Спецификация clip-path не позволяет более одного полигона, если не используется SVG. То есть нет способа создать более одной формы за раз.

Отверстия можно создать с помощью очень тонких соединений, если рисовать все одной формой. Другими словами, мы можем сделать очень тонкий надрез от края и вырезать отверстие. В демо ниже показан пример очень тонких соединителей:

Изменение формы clip path

Мы можем сделать эффект подсветки еще более привлекательным, добавив изменение формы clip-path. Ниже показан пример создания динамической подсветки бабочки в трех кадрах. Подсветка меняет форму между тремя разными вырезанными частями по наведению мыши.

Эффект двойной экспозиции

Другой интересный эффект, который можно создать через clip-path – двойная экспозиция. Ниже два изображения, смешанные в одной маске.

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

Можно ли clip-path использовать во всех браузерах? К сожалению, пока что нет! Если открыть таблицу caniuse, то она будет похожа на светофор (на момент написания статьи).

Данные о поддержке взяты с Caniuse. На сайте вы найдете более подробную информацию. Число – версия браузера с поддержкой и выше.

Создание интерактивных эффектов с помощью CSS clip path

Заключение

Надеюсь, вы вынесли из поста пару ключевых мыслей:

Clip path – один из способов выделения изображений

Наложение вырезанной части поверх оригинала позволяет создавать разные эффекты подсветки в изображениях

Мы можем использовать результаты тестирования браузера на масках для создания интерактивных эффектов с вырезанными частями

Свойство clip-path уступает шаблонам UX, которые выделяют и создают эффекты вокруг частей изображений

Автор: Mikael Ainalem

Источник: https://css-tricks.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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree