Свойство clip-path - это своего рода маска обрезки, знакомая всем дизайнерам из Photoshop, Illustrator или Figma, но средствами кода в CSS. То есть, если вам нужно скрыть какую-то часть контента, причем используя разную форму для этого, то свойство clip-path вам точно понравится.

Чаще всего с помощью clip-path обрезают изображения. Именно на них мы будем тренироваться в применении этого свойства.

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

  1. circle - круг
  2. ellipse - эллипс
  3. inset - четырёхугольник, в котором вы задаете смещение от края исходного объекта по 4 сторонам по часовой стрелке: сверху, справа, снизу и слева  (top → right → bottom → left).
  4. polygon - полигон, он же многоугольник
  5. svg - код в виде clip-path из встроенного в ваш html-файл svg или из внешнего svg-файла.
  6. none - значение по умолчанию - clip-path отключен (отсутствует)

Ниже вы найдете пример использования различных вариантов clip-path для создания маски для изображения. Границы изображения показаны рамками. Вы можете открыть вкладку CSS, для того чтобы посмотреть код для соответствующей маски. Все они даны для классов с названиями масок.

See the Pen clip-path example by Elen (@ambassador) on CodePen.0

Функции-значения свойства clip-path

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

В браузере точкой отсчета (нулевой координатой) является верхний левый угол как всего окна, так и отдельного элемента. Кроме того, обычно мы работаем с 2-мя осями координат: ось X идет по горизонтали вправо и ось Y - по вертикали вниз.

axis - координатные оси

clip-path: circle()

Вариант clip-path: circle() управляет круглой маской. В качестве значений нужно указать радиус круга и его центр. На рисунке ниже показана маска, которая отсекает часть элемента в виде сектора, т.к. центр круга расположен в нулевой точке.

circle clip-path

Чтобы сместить центр круга, укажите другие параметры в параметре at, например, clip-path: circle(100px at 100px 100px).

circle clip-path-2По умолчанию круг будет рисоваться из центра, то есть значение свойства 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.0

clip-path: ellipse()

Вариант clip-path: ellipse(), в отличие от круга, предполагает разное расстояние от центра. Поэтому вы указываете 2 значения: для горизонтального радиуса и для вертикального, и координаты центра эллипса. Кстати,в качестве координаты центра эллипса (и круга тоже) вы  можете указать ключевое слово center, которое размещает маску по центру элемента.

clip-path: ellipse

Примеры использования свойства clip-path: ellipse():

See the Pen clip-path: ellipse by Elen (@ambassador) on CodePen.0

clip-path: inset()

Этот вариант предполагает,что вы сдвигаете маску обрезки внутрь от краев. Вы можете указать одно значение, например, clip-path: inset(20px),  и в этом случае получите смещение краев маски внутрь относительно реальных размеров на 20px.

clip-path-inset-1

Если вы указываете 2 значения, то первое будет управлять верхним и нижним отступом, а второе - левым и правым. 3 значения управляют верхним отступом, затем правым и левым и 3-е значение - нижним отступом. 4 значения задают смещение от края исходного объекта по 4 сторонам по часовой стрелке: сверху, справа, снизу и слева (top → right → bottom → left ).
clip-path-inset-2
При указании процентов в качестве значений, величины берутся от ширины или высоты исходного элемента в зависимости от того, какое по счету значение указано в inset().

Кроме описания смещения по сторонам элемента, вы можете указать закругление углов. Для этого существует параметр round, для которого вы можете указать тоже от 1 до 4 значений.

clip-path-inset-3

Закругление углов можно отключить. Тогда вам надо указать в качестве значения для какого-либо угла(-ов) 0.

clip-path-inset-4

В примере ниже вы найдете несколько примеров с clip-path: inset() с разными параметрами.

See the Pen clip-path inset by Elen (@ambassador) on CodePen.0

clip-path: polygon()

Полигон, или многоугольник - это любая фигура от треугольника до 7-8-9- или более -угольника. Чаще всего это ромб или треугольник, но форма фигуры может быть какой угодно - звезда, крест, квадрат без середины или неправильный многоугольник. Чаще всего, координаты точек в виде пар X Y, задается в процентах,т.к. фигуры могут быть разного размера на разных экранах, и такой способ более универсален, чем пиксели или em, например.

clip-path: polygon

Для треугольника можно написать такое свойство: 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.0

Кстати, для элементов, которым задано свойство clip-path, нельзя задать свойство box-shadow. Вместо этого нужно задавать свойство filter: drop-shadow(), причем не для самого элемента, а для его "обертки".

clip-path: url()

В том случае, если ваш clip-path слишком сложен или просто существует в виде определенной фигуры в графическом редакторе (например,в Figma), то проще всего экспортировать такую фигуру в SVG-файл и использовать его в качестве clip-path.

Тут нужно соблюсти 2 условия:

  1. В SVG должен быть размещен тег <clipPath id="someID"> с атрибутом id внутри элемента <defs> или непосредственно в SVG.
  2. В CSS вы указываете свойство clip-path: url(#someID) (inline SVG, или встроенный SVG) или clip-path: url(path-to.svg#someID) (внешний SVG, содержащий clipPath с id). С последним вариантом все немного сложнее, чем со встроенным SVG, так как пока еще большинство браузеров такой вариант НЕ поддерживают (смотрите на caniuse.com)

clip-path: url()

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

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

Вторым условием является изменение атрибута clipPathUnits="userSpaceOnUse" на clipPathUnits="objectBoundingBox":

clipPathUnits = userSpaceOnUse objectBoundingBox

Варианты SVG clipPath в примерах:

See the Pen clip-path: url() by Elen (@ambassador) on CodePen.0

Генераторы clip-path

Вам же не хочется заморачиваться с рисованием распространенных фигур для clip-path? Тогда генераторы clip-path вам очень пригодятся. Вот несколько ссылок:

  1. Clippy
  2. cssplant.com Clip-Path Generator
  3. cssportal.com Clip-Path Generator
  4. Mozilla Firefox

Анимация для свойства 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.0

Пример 2:

See the Pen Clip-path transition example 2 by Elen (@ambassador) on CodePen.0

Примеры использования clip-path для разных случаев

Анимация блоков при наведении

See the Pen Show Posts with clip-path by Elen (@ambassador)on CodePen.0

Карточки для блока "Наша команда"

See the Pen
About Us Pop-Out Effect
by Mikael Ainalem (@ainalem)
on CodePen.0

Изменение вида блока при наведении

See the Pen CSS Clip-Path Hover Effect by Ryan Mulligan (@hexagoncircle) on CodePen.0

Слайдер

Пример кода, в котором clip-path в виде круга работает на появление нового слайда.

See the Pen Clip-Path Revealing Slider by Nikolay Talanov (@suez) on CodePen.0


Больше красивых слайдеров вы найдете в посвященной им статье.

И еще один слайдер на основе свойства clip-path с другими элементами управления и только на CSS.

See the Pen Image Clip-Path Animation with Sliders by Elen (@ambassador) on CodePen.0

О слайдерах на основе CSS можно прочитать в отдельной статье.

Анимация фото при наведении

See the Pen
Split Image | Hover Effect
by Dimitra Vasilopoulou (@mimikos)
on CodePen.0

Анимация текста

Пример 1: Появление и исчезновение текста

See the Pen Hand written SVG text animation by Matthew Ellis (@mellis84)on CodePen.0

Пример 2: Разрезанный текст

See the Pen Black Mirror Cracked Text Effect by George W. Park (@GeorgePark) on CodePen.0

Пример 3: Текст из кусочков

See the Pen Shattering Text Animation by Arsen Zbidniakov (@ARS) on CodePen.0

Интересную анимацию вы найдете в статье DOUBLE IMAGE HOVER EFFECTS.

На основе статьи Understanding Clip Path in CSS

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

Слайды к видео можно найти по ссылке.

Автор: Админ

Добавить комментарий

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