Что такое clip-patch и как с ним работать

Разбираемся что такое clip-patch и правильно им пользоваться. Где может пригодиться clip-patch и как обрезать объект с помощью clip-patch

Тонкости Clip-Patch

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

Первые дни работы над проектом в нашей тренировочной школе ознаменовалась интересными событиями. Работа над одностраничным сайтом должна была продемонстрировать понимание HTML, таблиц CSS, а именно, семантическое применение разметки и CSS для придания сайту презентабельного вида.

Heather Banks, одна из наших учениц, ранее проходившая обучение по HTML и CSS в моей группе, захотела воссоздать эффект, замеченный на сайте Squarespace, при котором, во время наведения на область div элемента, на ней появлялся срез.

Несмотря на то, что предыдущий опыт ученицы и её познания в HTML и CSS соответствовали её компетенции, я решил ей помочь в достижении эффекта. Визуально выполнить обрезку nav элемента – задача не из легких. Вот почему моим первым побуждением стала попытка вставить готовую картинку, соответствующую размерам обрезаемого фрагмента фона, с целью её дальнейшей установки в качестве псевдо-элемента :after. Однако этот путь являлся наименее адаптивным и управляемым.

Введение в свойство clip-path

Данное свойство можно назвать составляющей стандарта, пребывающего в статусе Working draft. Благодаря ему можно скрывать фрагменты картинки по заданной маске. На сегодняшний день clip-path всё еще не поддерживается браузерами Internet Explorer и Mozilla, однако совместим с Webkit браузерами.

Важно учесть: во время работы с этим свойством, необходимо не забывать прописывать –webkit в качестве префикса.

Для работы со свойством clip-path достаточно обозначить парный набор Y и X. По заданным значениям возводится кривая, по которой обрезается картинка.

Ограничений на конфигурацию формы нет, всё зависит от вашей фантазии. Это может быть эллипс, окружность, полигон и любые другие формы.

Разновидности форм

Простейший треугольник

See the Pen Showing the use of clip-path by Drew Minns (@drewminns) on CodePen.


Данный эффект можно получить, используя определенный элемент, к которому применено clip-patch свойство.


.clipClass {
    -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

Особенности применения

Подобно позиционированию, в данном случае работа ведется с помощью координат X и Y. Начало осей X:0 и Y:0 располагается в левой верхней части монитора. Правая сторона соответствует координатам X:100%, а левая - Y:100%.

Подобным образом необходимо создать такие точки:


x: 0, y:100%
x: 50%, y: 0
x: 100%, y: 100%

Стандартный путь берет свой начало с нижней части экрана с левой стороны. Далее необходимо обозначить точку 50% в горизонтальной плоскости верхнего края, а также 100% нижнего края. Таким образом, вы получите три точки, которые в свою очередь, соединившись между собой, образуют треугольник. Часть изображения, которая находится за пределами образовавшейся фигуры, визуально отсекается. Форма элемента имеет стабильную конфигурацию, однако саму картинку можно с легкостью заменить.

В примере с треугольником применялся полигон, а форма определялась, благодаря заданным координатам x и y, разделяемыми знаком “,”. Однако, использовать можно любые формы, задавая требуемые координаты.

Окружности

See the Pen azVYmq by Drew Minns (@drewminns) on CodePen.


Для того, чтобы задать форму окружности, потребуется указать 3 значения. Ими станут радиус окружности, а также координаты его центра.


.clipClass {
  -webkit-clip-path: circle(50% at 50% 50%);
}

Эллипсы

See the Pen qEVoaK by Drew Minns (@drewminns) on CodePen.


Довольно часто требуется вставить не стандартную окружность, а эллипс. Для того, чтобы задать его конфигурацию, потребуется обозначить 4 значения: два радиуса – по оси x и y и две координаты цента x и y. Последнюю пару необходимо отделять ключевым словом at.


.clipClass {
    -webkit-clip-path: ellipse(30% 20% at 50% 50%);
}

Скругленные прямоугольники

Важно: данная форма работает нестабильно в браузере Chrome

See the Pen myqxrg by Drew Minns (@drewminns) on CodePen.


Иногда дизайн сайта требует округления углов, поскольку полигоны с острыми углами не вписываются в концепцию проекта. Для подобных случаев пригодится форма inset. Благодаря ей, можно задать 4 значения, которые обозначат границы области: верх и низ, левую и правую стороны. Также потребуется задать 4 параметра для обозначения радиуса округления формы. Последние параметры отделяются с помощью ключевого слова radius.


.clipClass {
    -webkit-clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
}

Это читается следующим образом:


inset(    round    )

Однако, его можно сократить таким путём:


.clipClass {
    -webkit-clip-path: inset(25% 0 round 0 25%);
}

Терминология

  1. Polygon: polygon(x-axis y-axis, x-axis y-axis, ... )
  2. Circle: circle(radius at x-axis y-axis)
  3. Inset: inset(top right bottom left round top-radius right-radius bottom-radius left-radius)
  4. Ellipse: ellipse(x-rad y-rad at x-axis y-axis)

Как задать произвольную форму?

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

Текстовый блок для комиксов

See the Pen WbXzbb by Drew Minns (@drewminns) on CodePen.



.clipClass {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Звезда

See the Pen zxPWxd by Drew Minns (@drewminns) on CodePen.



.clipClass {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Анимированные элементы

Когда имеется понимание способа создания форм, стоит двигаться дальше и рассмотреть возможность создания анимированных элементов.

Для этого необходимо использовать свойство для того, чтобы наведение курсора мыши на тот или иной элемент приводило его в движение. Используя свойство transition, можно добиться плавного перехода. Прежде всего, потребуется задать первичное состояние с требуемыми координатами, которые и будут задействованы в форме, во время наведения на неё.

See the Pen VYrXvG by Drew Minns (@drewminns) on CodePen.



.animateClass {
  -webkit-clip-path: polygon(20% 0%, 0% 0%, 0% 50%, 0% 80%, 0% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0, 50% 0);
}
.animateClass:hover {
  -webkit-clip-path: polygon(50% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

Применение на практике

Несмотря на широчайшие возможности, применение clip-path имеет ряд ограничений, обусловленных особенностями браузера, используемого пользователем. На данный момент, только webkit браузеры полностью поддерживают clip-patch. Осуществление плавного перехода, используя маски SVG, с применением transition не всегда возможно в Mozilla. В то же время, Chrome и Safari отлично взаимодействуют с данным свойством.

Возвращаясь к началу

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

Перевод статьи с сайта: https://medium.com/@drewisthe/using-making-sense-of-clip-path-cf651676438c


Comments