Свойство clip-path - это своего рода маска обрезки, знакомая всем дизайнерам из Photoshop, Illustrator или Figma, но средствами кода в CSS. То есть, если вам нужно скрыть какую-то часть контента, причем используя разную форму для этого, то свойство clip-path вам точно понравится.
Чаще всего с помощью clip-path обрезают изображения. Именно на них мы будем тренироваться в применении этого свойства.
В качестве маски обрезки вы можете использовать ряд функций, соответствующих форме геометрических фигур:
circle- кругellipse- эллипсinset- четырёхугольник, в котором вы задаете смещение от края исходного объекта по 4 сторонам по часовой стрелке: сверху, справа, снизу и слева (top → right → bottom → left).polygon- полигон, он же многоугольникsvg- код в видеclip-pathиз встроенного в ваш html-файл svg или из внешнего svg-файла.none- значение по умолчанию - clip-path отключен (отсутствует)
Ниже вы найдете пример использования различных вариантов clip-path для создания маски для изображения. Границы изображения показаны рамками. Вы можете открыть вкладку CSS, для того чтобы посмотреть код для соответствующей маски. Все они даны для классов с названиями масок.
See the Pen clip-path example by Elen (@ambassador) on CodePen.
Функции-значения свойства clip-path
А теперь давайте разберем подробнее, какие параметры мы можем использовать в каждой из функций clip-path. И для начала давайте поговорим о том, как будут рассчитываться значения для наших элементов.
В браузере точкой отсчета (нулевой координатой) является верхний левый угол как всего окна, так и отдельного элемента. Кроме того, обычно мы работаем с 2-мя осями координат: ось X идет по горизонтали вправо и ось Y - по вертикали вниз.
clip-path: circle()
Вариант clip-path: circle() управляет круглой маской. В качестве значений нужно указать радиус круга и его центр. На рисунке ниже показана маска, которая отсекает часть элемента в виде сектора, т.к. центр круга расположен в нулевой точке.
Чтобы сместить центр круга, укажите другие параметры в параметре at, например, clip-path: circle(100px at 100px 100px).
По умолчанию круг будет рисоваться из центра, то есть значение свойства clip-path: circle(100px at center) соответствует значению clip-path: circle(100px). Вместо center вы можете использовать в качестве первой. горизонтальной координаты ключевые слова left и right, а в качестве вертикальной - top и bottom.
Примеры значений в свойстве clip-path: circle():
See the Pen clip-path: circle by Elen (@ambassador) on CodePen.
clip-path: ellipse()
Вариант clip-path: ellipse(), в отличие от круга, предполагает разное расстояние от центра. Поэтому вы указываете 2 значения: для горизонтального радиуса и для вертикального, и координаты центра эллипса. Кстати,в качестве координаты центра эллипса (и круга тоже) вы можете указать ключевое слово center, которое размещает маску по центру элемента.
Примеры использования свойства clip-path: ellipse():
See the Pen clip-path: ellipse by Elen (@ambassador) on CodePen.
clip-path: inset()
Этот вариант предполагает,что вы сдвигаете маску обрезки внутрь от краев. Вы можете указать одно значение, например, clip-path: inset(20px), и в этом случае получите смещение краев маски внутрь относительно реальных размеров на 20px.
Если вы указываете 2 значения, то первое будет управлять верхним и нижним отступом, а второе - левым и правым. 3 значения управляют верхним отступом, затем правым и левым и 3-е значение - нижним отступом. 4 значения задают смещение от края исходного объекта по 4 сторонам по часовой стрелке: сверху, справа, снизу и слева (top → right → bottom → left ).
При указании процентов в качестве значений, величины берутся от ширины или высоты исходного элемента в зависимости от того, какое по счету значение указано в inset().
Кроме описания смещения по сторонам элемента, вы можете указать закругление углов. Для этого существует параметр round, для которого вы можете указать тоже от 1 до 4 значений.
Закругление углов можно отключить. Тогда вам надо указать в качестве значения для какого-либо угла(-ов) 0.
В примере ниже вы найдете несколько примеров с clip-path: inset() с разными параметрами.
See the Pen clip-path inset by Elen (@ambassador) on CodePen.
clip-path: polygon()
Полигон, или многоугольник - это любая фигура от треугольника до 7-8-9- или более -угольника. Чаще всего это ромб или треугольник, но форма фигуры может быть какой угодно - звезда, крест, квадрат без середины или неправильный многоугольник. Чаще всего, координаты точек в виде пар X Y, задается в процентах,т.к. фигуры могут быть разного размера на разных экранах, и такой способ более универсален, чем пиксели или em, например.
Для треугольника можно написать такое свойство: clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Чаще всего полигоны задают с помощью генераторов clip-path или встроенного в Инструменты разработчика Firefox редактора clip-path.
Несколько вариантов clip-path: polygon() представлены ниже.
See the Pen clip-path: polygon by Elen (@ambassador) on CodePen.
Кстати, для элементов, которым задано свойство clip-path, нельзя задать свойство box-shadow. Вместо этого нужно задавать свойство filter: drop-shadow(), причем не для самого элемента, а для его "обертки".
clip-path: url()
В том случае, если ваш clip-path слишком сложен или просто существует в виде определенной фигуры в графическом редакторе (например,в Figma), то проще всего экспортировать такую фигуру в SVG-файл и использовать его в качестве clip-path.
Тут нужно соблюсти 2 условия:
- В SVG должен быть размещен тег
<clipPath id="someID">с атрибутом id внутри элемента<defs>или непосредственно в SVG. - В CSS вы указываете свойство
clip-path: url(#someID)(inline SVG, или встроенный SVG) илиclip-path: url(path-to.svg#someID)(внешний SVG, содержащийclipPath с id). С последним вариантом все немного сложнее, чем со встроенным SVG, так как пока еще большинство браузеров такой вариант НЕ поддерживают (смотрите на caniuse.com)
В самом SVG clipPath вы тоже наверняка захотите иметь такого вида, чтобы он на разных экранах масштабировался вместе с вашей картинкой или другим элементом. Однако, как правило, во всех SVG, которые вы экспортируете из графических редакторов или скачиваете с каких-либо источников, координаты внутри SVG будут абсолютными, т.е. привязанными к начальным размером нарисованной векторной картинки.
Вам же нужны относительные координаты. Обычно никто не хочет пересчитывать самостоятельно из абсолютных координат в относительные, то вам тогда нужен онлайн-инструмент для этого. Вы найдете его здесь.
Вторым условием является изменение атрибута clipPathUnits="userSpaceOnUse" на clipPathUnits="objectBoundingBox":
clipPathUnits = userSpaceOnUse → objectBoundingBox
Варианты SVG clipPath в примерах:
See the Pen clip-path: url() by Elen (@ambassador) on CodePen.
Генераторы clip-path
Вам же не хочется заморачиваться с рисованием распространенных фигур для clip-path? Тогда генераторы clip-path вам очень пригодятся. Вот несколько ссылок:
Анимация для свойства clip-path
Конечно же, самым интересным в использовании свойства clip-path является возможность его анимации. Для этого отлично подходит cвойство transition с разными значениями для clip-path.
В 2-х примерах ниже вы найдете примерно одинаковый подход к анимации clip-path: circle(), но с несколько разным видом. Код несложный, а смотрится достаточно эффектно.
Пример 1:
See the Pen Clip-path transition example 1 by Elen (@ambassador)on CodePen.
Пример 2:
See the Pen Clip-path transition example 2 by Elen (@ambassador) on CodePen.
Примеры использования clip-path для разных случаев
Анимация блоков при наведении
See the Pen Show Posts with clip-path by Elen (@ambassador)on CodePen.
Карточки для блока "Наша команда"
See the Pen About Us Pop-Out Effect by Mikael Ainalem (@ainalem) on CodePen.
Изменение вида блока при наведении
See the Pen CSS Clip-Path Hover Effect by Ryan Mulligan (@hexagoncircle) on CodePen.
Слайдер
Пример кода, в котором clip-path в виде круга работает на появление нового слайда.
See the Pen Clip-Path Revealing Slider by Nikolay Talanov (@suez) on CodePen.
Больше красивых слайдеров вы найдете в посвященной им статье.
И еще один слайдер на основе свойства clip-path с другими элементами управления и только на CSS.
See the Pen Image Clip-Path Animation with Sliders by Elen (@ambassador) on CodePen.
О слайдерах на основе CSS можно прочитать в отдельной статье.
Анимация фото при наведении
See the Pen Split Image | Hover Effect by Dimitra Vasilopoulou (@mimikos) on CodePen.
Анимация текста
Пример 1: Появление и исчезновение текста
See the Pen Hand written SVG text animation by Matthew Ellis (@mellis84)on CodePen.
Пример 2: Разрезанный текст
See the Pen Black Mirror Cracked Text Effect by George W. Park (@GeorgePark) on CodePen.
Пример 3: Текст из кусочков
See the Pen Shattering Text Animation by Arsen Zbidniakov (@ARS) on CodePen.
Интересную анимацию вы найдете в статье DOUBLE IMAGE HOVER EFFECTS.
На основе статьи Understanding Clip Path in CSS
Если вы заинтересовались эффектами, которые получаются с помощью свойства clip-path, то вам стоит посмотреть еще видео ниже.
Слайды к видео можно найти по ссылке.
