От автора: веб-сайты имеют преимущественно прямоугольную форму, а вот печатные СМИ не ограничены только лишь прямоугольником. Разница кроется во множестве причин, одна из которых это отсутствие подходящих инструментов. В этом уроке вы узнаете про свойство clip-path, с помощью которого можно кадрировать изображения. Видимая область задается с помощью специальных значений. Мы начнем с основных моментов, рассмотрим синтаксис и затем перейдем на более продвинутые концепции.
Основы
Кадрирование это когда мы отрезаем часть чего-то. В нашему случае это операция, которая позволяет частично или полностью скрыть элемент на странице. В этой статье мы будем пользоваться двумя концепциями clipping path (путь обрезки) и clipping region (регион обрезки).
Путь обрезки это тот маршрут, по которому будет обрезан элемент. С его помощью мы задаем вырезаемую область. Форма области может быть как простой, так и сложной. Регион обрезки это все, что находится внутри пути обрезки.
Все, что находится за пределами региона обрезания, скрывается браузером. Скрывается не только фон, но и рамки, текстовые тени и т.д. В большинстве браузеров за пределами региона обрезания не будут работать события hover или click на элементе.
Даже если на вид наш элемент имеет форму, отличную от прямоугольника, контент вокруг него все равно воспринимает его как прямоугольник. Чтобы исправить это, необходимо использовать свойство shape-outside.
Нельзя путать данное свойство с устаревшим clip, у которого было множество ограничений, а также поддерживалось только прямоугольное кадрирование.
Синтаксис и применение
Синтаксис свойства:
|
1 |
clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none |
Значения выше:
clip-source — URL на внутренний или внешний SVG
basic-shape принимает стандартную функцию формы, прописанную в спецификации CSS Shapes.
geometry-box – необязательный параметр. В паре с функцией basic-shape данный параметр задает эталонный блок для обрезания функцией basic-shape. Если задан только geometry-box, то для обрезки используется его форма, в том числе и все искривления(с помощью свойства border-radius). Ниже мы разберем эту функцию подбробнее.
Взгляните на CSS код с функцией базовой формы:
|
1 2 3 |
img { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } |
Все изображения будут обрезаны в форме ромба. Но почему именно ромб, а не трапеция или параллелограмм? Все зависит от указанных значений вершин. Рисунком ниже можно пользоваться для создания собственных фигур для кадрирования:
Первая координата каждой точки определяет положение на оси Х. Второе значение отвечает за ось У. Все точки идут по часовой стрелке. Посмотрите на самую правую точку нашего ромба. Она расположена посередине оси У, т.е. ее координата 50%. Также она расположена в максимальном значении по оси Х, т.е. координата 100%. Значения остальных точек можно рассчитать схожим образом.
Кадрирование элементов с помощью значений geometry-box
При обрезании HTML элемента geometry-box может принимать одно из значений: margin-box, border-box, padding-box или content-box. Значение geometry-box используется следующим образом:
|
1 2 3 4 |
.clip-me { clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box; margin: 10%; } |
В нашем примере margin-box будет использоваться как ссылка на точное положение вершин обрезания. Точка 10%, 10% — верхний левый угол нашего margin-box, т.е. clip-path будет отталкиваться от этой точки. Значения для SVG: fill-box, stroke-box и view-box. Если view-box не задан, то значение view-box будет использовать ближайший размер SVG области.
Применение свойства clip-path
У данного свойства много интересных способов применения. Во-первых, с его помощью можно улучшать текстовый контент. Взгляните на изображение ниже. Фон заголовка и второго параграфа созданы с помощью этого свойства:
Первый фон можно так же просто создать с помощью градиента или любой другой техники. А вот второй фон будет создать намного сложнее без свойства clip-path. Обратите внимание, что нижняя линия фона параграфа не совсем прямая, она под легким наклоном. Сделать такой фон с помощью свойства clip-path можно в одну строку:
|
1 2 3 |
.p-msg { clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%, 50% 80%, 0% 75%); } |
Фон имеет семь вершин, что отражено в коде выше. Вы можете спросить, а как же я получил эти координаты? Оставлю вопрос без ответа, подумайте сами – так вы намного лучше поймете принцип работы данного свойства. Поиграйтесь с демо ниже, чтобы понять:
С помощью данного свойства и дополнительного CSS кода можно придавать изображениям различные формы и собирать их в композиции. Теперь в вашей галерее могут быть не только прямоугольные превью изображений, а аватарки пользователей могут принимать вообще любую форму. В этом уроке мы создадим композицию из изображений в виде ромба. Так как у всех изображений одна и та же форма ромба, то и значения для свойства clip-path у них будут совпадать. Ниже представлен CSS код самого правого изображения:
|
1 2 3 4 5 6 |
.right { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); position: relative; top: -352px; left: 256px; } |
Пример работы clip-path:
Со свойством clip-path можно вытворять что угодно – можно создавать кнопки причудливых форм или добавить красивый hover эффект к меню. Все зависит только от вашего воображения!
Добавляем анимацию
Данное свойство можно анимировать. Необходимо только соблюдать, чтобы количество вершин конечной и первой фигуры совпадали. Данное ограничение установлено не просто так, иначе браузер просто не сможет понять, в каком месте вставить еще одну вершину (или откуда ее удалить). Ниже представлен код анимации трапеции:
|
1 2 3 4 5 6 7 8 9 10 11 |
@keyframes polygons { 25% { clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%); } 50% { clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0 100%); } 70% { clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%); } } |
В конце анимации трапеция превращается в треугольник. Как я сказал ранее, нельзя менять количество вершин. В противном случае переход к новой форме будет резким. Поэтому первые две вершины последнего полигона я задал в одном и том же месте. Наш четырехугольник прекрасно трансформируется в треугольник.
Поддержка в браузерах
Свойство не поддерживается в IE и Edge. Firefox поддерживает clip-path частично (поддерживается только синтаксис url()). Однако с 47 версии и выше Firefox полностью поддерживает данное свойство с включенным флагом layout.css.clip-path-shapes.enabled.
В Chrome, Safari и Opera нужен префикс -webkit-. К сожалению даже в этих браузерах не поддерживаются фигуры из внешних SVG файлов. Более подробно о поддержке можно узнать на сайте Can I Use.
Заключение
В данном уроке мы познакомились со свойством clip-path. Научиться работать с данным свойством не требует много времени. Однако если вы хотите создавать что-то по-настоящему креативное, придется немного попрактиковаться. К тому же поддержка у clip-path довольно неплохая, вы уже можете создавать мощные эффекты.
Дам вам ссылки на два инструмента — clippy от Bennett Feely и clip path generator от CSS Plant – с их помощью вы с легкостью будете создавать сложные полигональные формы.
А вы уже создавали что-то необычное с помощью свойства clip-path? Оставляйте ссылки в комментариях.
