Разбираемся с clip-path
HTML&CSS

Разбираемся с clip-path

Оригинал: Making Sense of Clip Path, Drew Minns

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

Шла первая неделя проекта в нашем учебном лагере. Одностраничный сайт, демонстрирующий понимание HTML и CSS: семантическое использование разметки и CSS для стилей. Одна из наших студенток, Хизер Бэнкс , хотела повторить эффект на Squarespace , где при наведении на div, на нем появлялся срез.

Зная ее предыдущий опыт в HTML и CSS, эта задача была полностью в ее компетенции, но я решил помочь ей в реализации этого эффекта. Сделать обрезку элемента меню при наведении не простая задача, и моим первым инстинктом было сделать небольшое изображение, совпадающее с фоном, и задать его в качестве фона псевдо-элементу :after. Проблема в том, что этот способ не адаптивный и не предсказуемый.

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

Это свойство является частью стандарта, который находится в статусе Working draft и позволяет скрывать участки изображения по маске. Пока clip-path не широко поддерживается всеми последними версиями браузеров (не поддерживается Firefox и IE), но отлично работает в браузерах Webkit.

Обратите внимание, чтобы использовать это свойство сейчас, необходимо указывать префикс -webkit.

Работать с этим свойством просто, необходимо указать набор пар X и Y. По этим значениям строится кривая, и изображение обрезается по этой кривой.

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

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

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

Эффект, показанный выше достигается с помощью одного элемента и примененного к нему свойства clip-path.


.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.

Чтобы создать окружность, необходимо передать три значения. Координаты x и y центра окружности и радиус окружности. После задания радиуса, мы использовали ключевое слово at, чтобы передать координаты центра.


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

Эллипсы

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

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


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

Прямоугольник со скругленными углами

(Может нестабильно работать в Google Chrome)

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

Возможно, вы захотите создать прямоугольник со скругленными углами, а острые углы полигонов — это не то, что нужно. Тогда может пригодиться форма inset. Она принимает четыре значения, определяющие верхнюю, правую, нижнюю и левую границу области и четыре параметра, определяющие радиус скругления, отделенные ключевым словом 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%);
}

Быстрая справка

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

Создание произвольных форм

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

Блок текста из комиксов


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, есть серьезные ограничения его использования. В Firefox для этого есть SVG маски, но плавный переход с помощью transition в данном случае не всегда возможен.

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

Вернемся к исходной задаче

Все началось с того, что мы хотели воссоздать эффект в навигации на Squarespace. Расположив один элемент над другим и применив clip-path к элементам меню, мы воссоздали эффект без всевозможной замены изображений.

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

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться