Отсечение с помощью свойства clip-path похоже на вырезание фигуры (например, круга или пятиугольника) из прямоугольного листа бумаги. Свойство относится к спецификации «CSS Masking Module Level 1». Спецификация заявляет: «Маскирование CSS предлагает два средства для частичного или полного сокрытия частей визуальных элементов: маскирование и отсечение».
Первая часть, то есть маскирование, связана с использованием графического элемента, такого как изображения PNG, градиента на CSS или элемента SVG, в качестве маски для сокрытия разделов другого элемента.
Вторая часть, то есть clip-path, включает замкнутый векторный контур, который может быть базовой фигурой, определённой в CSS или SVG с использованием тега clipPath. Область внутри этого контура отображается, а всё, что находится за её пределами или снаружи, будет обрезано.
Маскирование выходит за рамки этого материала, но CSS-Tricks и HTML5 Rocks содержат больше информации.
Ниже приведена простая визуализация того, как работает clip-path.
See the Pen Visualizing clip-path by webref (@webref) on CodePen.
Демонстрации в этой статье, в том числе и выше, будут работать в Firefox и в браузерах WebKit и Blink, включая Chrome, Safari и Opera.
clip-path — это не clip
Существует старое свойство clip из CSS 2.1, которое довольно ограниченно, хотя бы потому, что оно поддерживает только прямоугольные фигуры. Свойство устарело в пользу clip-path.
Статьи об отсечении, использующие устаревший синтаксис, содержат код, который выглядит следующим образом:
.element {
clip: rect(30px, 30px, 20px, 20px);
}
Поддержка clip-path
В августе 2014 года «CSS Masking Module» был опубликован как «Возможная рекомендация», что является шагом вперёд по сравнению с ранним этапом «Рабочий проект». Прежде чем мы посмотрим на поддержку браузерами, важно рассмотреть несколько способов, как clip-path может применяться к элементу, поскольку поддержка браузером зависит от каждого метода.
Существует два способа использования clip-path.
1. на CSS
Основные фигуры из «CSS Shapes Module» обеспечивают удобный способ использования clip-path. Доступны разные фигуры: polygon, circle, ellipse и inset; inset предназначен для прямоугольников.
2. на SVG
В качестве альтернативы можно создать фигуру с помощью SVG, а затем обрезать элемент по этой фигуре с помощью синтаксиса URL. Есть два способа сделать это:
- через указатель на встроенный SVG (то есть разметка SVG существует в самой странице);
- со ссылкой на внешний документ SVG.
В обоих случаях в SVG используется элемент clipPath для обёртывания элемента, который определяет обтравочный контур, будь то круг, многоугольник или другой элемент. Сравните демонстрационную версию ниже в Firefox и в браузере WebKit или Blink, таком как Chrome, чтобы определить различия. Квадратные изображения подразумевают отсутствие поддержки браузера.
Третье изображение не отображается в Safari. Несмотря на обширную отладку, мне не удалось решить эту проблему. Я была бы признательна за примечание в разделе комментариев, если вы столкнетесь с решением.
See the Pen Clip-path: Browser support by webref (@webref) on CodePen.
Поскольку вы, вероятно, собрались смотреть демонстрацию выше в разных браузерах, поддержка обтравочных путей причудлива и в настоящее время зависит от того, как вы хотите обрезать элемент.
- на CSS: Firefox 54+, Chrome 24+, Safari 7+, Opera 15+, iOS 7.1+, Android 4.4+, Opera Mobile 24+
Обратите внимание, что для всех поддерживаемых браузеров в настоящее время требуется префикс -webkit. (Кроме Firefox — прим. переводчика).
- на SVG: все перечисленные выше браузеры и Firefox 3.5+.
Свойство clip-path ещё не поддерживается в Internet Explorer, но в настоящее время разрабатывается как часть «Masking Module».
Современные браузеры WebKit и Blink поддерживают обтравочные контуры на SVG, только если они объявлены встроенными (то есть внутри документа). Ссылки на внешние SVG поддерживаются только в Firefox, о чем свидетельствует демонстрация выше. Проект Chromium отслеживает эту ошибку.
Давайте рассмотрим преимущества CSS и SVG при работе с clip-path.
Преимущества CSS
- Ясный синтаксис лёгок для понимания из-за относительной простоты базовых фигур.
- Адаптивность легко получается через относительные единицы, такие как проценты.
Преимущества SVG
- Поддержка браузерами лучше, добавляется Firefox.
- Вы можете сделать обрезку сложными фигурами, несколькими фигурами и текстом.
Кроме того CSS предлагает свойство background-clip, которое даёт нам некоторые варианты (включая нестандартный способ обрезки текста), при этом ни background-clip, ни clip-path не соответствуют тому, что может делать отсечение на SVG в современных браузерах. Однако знакомство с clip-path через CSS менее устрашающе (особенно если вы не знакомы с манипуляцией SVG) и подготовит вас к тонкостям обтравочных контуров с помощью SVG, а также к модулю CSS Shapes Module, где содержимое выравнивается по форме элемента.
Если вам не терпится вникнуть в матрицу отсечения на SVG, обзор Сары Суэйдан станет хорошей отправной точкой.
Давайте рассмотрим плюсы и минусы использования clip-path для прогрессивного улучшения нашего дизайна.
Плюсы
- Браузеры, которые не поддерживают свойство clip-path, будут его игнорировать. Если вы используете свойство осторожно, пользователи с неподдерживаемыми браузерами ничего не заподозрят!
- После создания обтравочного контура спецификация заявляет, что события указателя не должны отправляться за пределы области отсечения (что идеально). Таким образом, события щелчка ограничены фигурой и её внешней границей.
- Вы можете использовать проценты или любую единицу длины, например пиксели или em, для определения координат базовых фигур с помощью CSS. Гибкие единицы, такие как проценты, могут использоваться для создания отзывчивых фигур, идеально подходящих для адаптивных макетов.
Минусы
- Все границы, тени и контуры за пределами области отсечения будут обрезаны. Вы не можете добавить границу и ожидать её соблюдения. Ниже мы рассмотрим некоторые альтернативы.
- Спецификация ещё не достигла стадии «Рекомендация», поэтому всегда есть шанс, что синтаксис поменяется.
- Сообщается о нескольких ошибках с clip-path и трёхмерными трансформациями, переходами и прозрачностью, которые описаны ниже. Помните об этом и избегайте комбинирования свойств, которые порождают такие ошибки.