Меню

Clip path polygon генератор

Реальные примеры с clip-path

Каждая демонстрация использует clip-path из CSS, но в разметке также содержится встроенный SVG с классом clip-svg , который просто сбрасывает ширину и высоту SVG до 0. Вы также можете удалить этот класс и задать атрибуты width и height непосредственно в разметке SVG.

Пример 1: Обрезка изображений разными многоугольниками

Если вам требуется быстрое определение многоугольника — это замкнутая двумерная фигура, состоящая из прямых линий.

Таким образом, фигура не может быть многоугольником, если она содержит закругления, открыта или состоит меньше, чем из трёх линий. Наиболее известные многоугольники в истории — это треугольники, четырёхугольники, пятиугольники и шестиугольники. Даже звёзды является многоугольниками, поскольку границы многоугольника могут пересекать друг друга.

Примечание. Изображения в этой демонстрации адаптивные. Используя хорошее решение для адаптивных изображений img < max-width: 100%; height: auto; >, а также адаптивные обтравочные контуры через CSS и SVG, мы делаем наши многоугольники прекрасно масштабируемыми.

Данная демонстрация является результатом упражнения для понимания построения координат при создании многоугольников. В демонстрации ниже я добавила несколько фигур, которые вы можете использовать в своих проектов. При наведении на каждое изображение вы увидите соотношение сторон исходного изображения.

Ничто не сравнится с исключительным инструментом Clippy для визуализации фигур — графическим интерфейсом от Беннетта Фели. Координаты всех существующих фигур представлены в процентах, также есть возможность добавления собственного многоугольника. Вы можете использовать Clippy для создания обрезанных фигур и своего SVG на их основе для лучшей поддержки в браузерах.

Пример 2: Анимация базовых фигур через transition

Наведите курсор на фиолетовый шестиугольник и он превратится в восьмиугольник. Однако заданного эффекта перехода не произойдёт.

Причина объясняется в статье Сары Суэйдан об анимации фигур через CSS: «Число точек, определяющих конечную фигуру, должно быть таким же, как число точек, определяющих начальную фигуру». Вполне логично!

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

Вот описание шестиугольника с шестью парами координатных точек:

А это описание шестиугольника с восемью парами координат, первые две из которых были дублированы:

Теперь переход при трансформации фигур будет плавным, как видно в демонстрации ниже.

Учтите, что для браузеров, которые поддерживают обтравочные контуры только на SVG, нам нужно добавить анимацию SMIL, чтобы получить бесшовный переход при наведении. Согласно спецификации SMIL, декларативные анимации могут применяться для анимации линий и точек многоугольника в SVG, что в настоящее время невозможно с помощью CSS.

Имейте в виду, что некоторые люди обсуждают устаревшие SMIL в Chrome и Chromium и уделяют особое внимание внедрению Web Animations API, который, к сожалению, находится на стадии рабочего проекта.

В демонстрации ниже (фоновое изображение предоставлено morgueFile), вы можете видеть, как мы анимировали точки многоугольника между событиями mouseover и mouseout в течение 0,2 секунд. Присмотритесь к тегу в разметке SVG.

Пример 3. Добавление рамки к обрезанному объекту

Для сокращения рассказа — границы, контуры и тени, которые лежат за пределами области отсечения, удаляются.

Мне было немного грустно от этого, и я поспрашивала членов W3C по рабочей группе CSS. Однако вывод в том, что нет способа сделать это при использовании базовых фигур. Дирк Шульцe так ответил на мой вопрос: «Да, все операции рисования с элементом отсекаются. Сюда входят контуры и границы».

Смотрите демонстрацию ниже. Наведите указатель на ромбоид с неполной рамкой, чтобы увидеть исходную, необрезанную версию с целой рамкой.

Конечно, мы всегда можем использовать приём, к которому я наконец пришла, и получить рамку с помощью генерируемого содержимого.

В демонстрации ниже создаётся копия элемента через псевдоэлемент ::after и затем он позиционируется абсолютно. Это создаёт иллюзию рамки, позволяя нам моделировать интересные эффекты, такие как градиентная рамка на втором восьмиугольнике и внутренняя тень через фильтр CSS на третьем (не очень изящно, но функционально). Обратите внимание, что фильтры CSS в настоящее время работают только в Firefox и в браузерах WebKit и Blink.

Пример 4: Использование clip-path для создания ромбовидной сетки

Ниже приведено изображение, которое будем использовать.

Вот эффект, к которому мы стремимся. При наведении указателя на нижние три блока вы увидите, что фоновый цвет исчезает и проступает изображение.

Фактический размер изображения составляет 600×600 пикселей. Так что начнём с четырех пустых

Теперь изменим значение свойства background-position для каждого изображения на top , left , right и bottom , соответственно.

Обрежем каждый блок в виде ромба и наложим абсолютно позиционированный слой с некоторым текстом на каждое из нижних трёх изображений.

Теперь переместим изображения по рядам — второе и третье изображения в один ряд, а первое и четвертое в отдельные ряды.

Наконец, используем отрицательные margin для смещения второй и третьей строки, чтобы они выстроились как в окончательной демонстрации ниже. Мы можем удалить значение ширины 604 пикселя у родителя и переделать медиа-запрос, чтобы четыре ромба складывались в колонку на маленьких экранах и в ряды на больших.

Во время работы над этой демонстрацией я заметила ошибку в Chrome, связанную с событиями указателя, они отправлялись за пределами области отсечения, что нарушает спецификацию: «По умолчанию события указателя не должны отправляться за пределами обрезанной (невидимой) области». Я сообщила о данной ошибке. Проблема с этой демонстрацией была решена с помощью свойства pointer-events со значением none для класса overlay . В качестве альтернативы вы можете применить то же самое значение clip-path к overlay для обхода проблемы.

Из-за отрицательных margin эта демонстрация будет выглядеть странно в браузерах, которые не поддерживают clip-path . Так что желательно использовать какую-то проверку перед применением margin (но сама я с этим не экспериментировала) или @supports , хотя не рекомендовала бы последнее в рабочем коде.

Пример 5. Создание фиктивной страницы профиля на шестиугольниках

Наша финальная страница должна выглядеть так:

Начнём с добавления фоновой картинки в виде шестиугольных плиток к body (изображение любезно предоставлено Subtle Patterns).

Значения clip-path для шестиугольника могут быть получены с одной из демонстраций выше или с помощью инструмента Clippy.

Первый шестиугольник использует фоновое изображение (потому что мы смешиваем тусклый бордовый цвет с фоном с помощью свойства background-blend-mode ). Используя генерируемое содержимое, абсолютно позиционированный элемент обрезается до бордового треугольника, его вы можете видеть снизу. Он исчезает при наведении.

Для второго шестиугольника со словом «work» просто задан тёмно-серый фон, который меняется при наведении.

Третий шестиугольник содержит градиентную рамку, аналогичную той, что показана в демонстрации при создании рамок на clip-path .

Шестиугольники вертикально выстраиваются на маленьких экранах и выравниваются по центру на больших. Я использовала комбинацию display: table , абсолютного позиционирования и трансформации. Конечно, вы можете воспользоваться flexbox, float или чем-то ещё, что заставит вашу лодку плавать.

Вот заключительная демонстрация.

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

Также имеется другая ошибка с clip-path и свойством backface-visibility , когда оно задано как hidden . Эта ошибка задокументирована в Chromium и мне удалось воспроизвести её, используя синтаксис базовых фигур в Chrome под Linux. Имейте это в виду, если используете clip-path для создания классного трёхмерного разворота или чего-нибудь, что использует трёхмерную трансформацию CSS.

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

Благодаря clip-path вы можете значительно изменить внешний вид страницы, не беспокоясь о старых браузерах, где страница будет изящно деградировать. Если вы решите использовать clip-path для улучшения дизайна, следите за спецификацией, поскольку она продвигается к статусу «Рекомендация».

Источник

Как понять свойство clip-path в CSS

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

Вступление

Свойство clip-path создаёт область отсечения: внутри неё контент видно, а вне её – нет. Вот простой пример круга с применением clip-path .

Когда применяется clip-path , видимой областью оказывается только синий круг. Мы не видим ничего за пределами круга. Вот анимация, которая показывает отсечение круга из примера выше:

Система координат

Прежде чем углубляться в детали clip-path, стоит упомянуть о том, как работает система координат. Начало координат – это верхний левый угол, ось x направлена вправо, а ось y – вниз.

Учитывая это, чтобы увидеть, как обрезается элемент, давайте возьмём простой пример. В нём обрезанная область – это круг размером 100 px, его центр расположен в точке 0,0 (вверху слева).

Обратите внимание, что пользователь видит только выделенную тёмно синюю область. Оставшаяся часть круга обрезана. Вопрос в том, как сделать видимым весь круг? Для этого нужно изменить точки осей x и y .

Центр круга расположен в 100 px левее и 100 px выше. Теперь, когда вы понимаете, как работает система координат, я расскажу о возможных значениях свойства clip-path .

Значения clip-path

inset

Значение inset определяет вставляемый прямоугольник. Мы можем контролировать четыре края, точно так же, как это делается с краями или отступом. В примере ниже .card имеет свойство inset 20px со всех краёв (сверху, справа, снизу и слева).

Если нужно, подправьте inset с одного из краёв. Вот пример, как это сделать:

Выше класс .card имеет свойство inset со значением 50px снизу.

Вопрос в том, возможна ли округлая вставка? Да! Благодаря ключевому слову round. Добавление ключевого слова слева от радиуса округляет углы, вот так: round .

Кроме того, мы даже можем настроить радиус каждой стороны отдельно. Вот пример с нулевым радиусом верхнего правого и нижнего левого углов.

circle()

Чтобы использовать значение circle(), нам понадобится радиус и его положение. Вот пример:

Радиус окружности равен 80px , и она позиционирована так: 50% на оси x, 50% на оси y.

ellipse()

С помощью функции ellipse() мы можем установить ширину и высоту, чтобы сделать отсечение овальным.

polygon()

Самое интересное для меня значение – polygon(). Можно управлять несколькими наборами значений по осям x и y.

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

Используя значение polygon() , можно рисовать сложные фигуры с несколькими точками.

Значение path() позволяет использовать элемент SVG, чтобы обрезать определённую область. Сейчас его поддержка браузером непоследовательна. Чтобы заставить это свойство работать в разных браузерах, нам нужно использовать встроенный SVG, а затем функцию url() как значение для clip-path .

В коде CSS нужно добавить путь к clipPath при помощи url() .

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

Примеры применения

Эффект разворота плоскости

Так или иначе, нечто с подобной структурой вы уже видели. Это идеальный пример того, как использовать clip-path .

Можете ли вы предположить, как реализовать поворот? Здесь поможет polygon() .

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

Исследуем эту часть с помощью DevTools. Открыв «Исследовать элемент», обратите внимание на маленький значок полигона в левой части значения polygon() .

Нажав его, вы сможете отредактировать полигон в браузере. Посмотрите картинку ниже:

Угол относительно ширины видового экрана

Можно воспользоваться функцией calc() вместе с единицами viewport, чтобы угол зависел от ширины видового экрана. Я узнал об этом из замечательной статьи Килиана Валькхофа.

Несколько углов

У меня в голове возник вопрос: захочется ли нам иметь несколько угловых секций? Посмотрите на рисунок ниже.

Первое, о чем я подумал, – просто добавить box-shadow или border . К сожалению, они будут обрезаны, так что, даже если добавить их, мы не увидим того, что хотим увидеть. Решение в таком случае – использовать несколько элементов, причём точка отсечения будет у каждого своя:

У нас есть псевдоэлемент с тем же размером и clip-path, что и у другого элемента. Разница в том, что он расположен под ним с bottom:-20% и z-index:-1 . Я написал значение 20% , потому что это то же, что 100 − 80.

Появление при прокрутке

Используя API IntersectionObserver, мы можем проявлять определённые элементы на странице во время прокрутки.

Значение inset

Самое полезное значение clip-path для этого эффекта – inset. Почему? Посмотрите на рисунок ниже.

Обратите внимание, что синий прямоугольник может стать полностью невидимым, если написать inset(50%) . Да, значение, которое сделает элемент невидимым, составляет 50%: мы применяем inset с четырёх сторон. Другими словами, inset применяется от края к центру прямоугольника. На рисунке ниже inset используется для показа изображений во время прокрутки:

Приведённый ниже код javascript добавляет класс is-visible к каждому изображению, которое находится в области просмотра. При этом мы можем увидеть изображение с помощью прокрутки.

Всё просто. Мы создали простой эффект прокрутки с помощью нескольких строк CSS и JavaScript.

Кроме того, возможно контролировать направление перехода появления. Для этого нам нужно использовать одно из четырёх значений. Например, если нам нужен переход сверху вниз, нижнее значение должно быть изменено со 100% на 0. Посмотрите на картинку с объяснением:

А вот интерактивная демонстрация:

Эффекты наведения и анимации

Что нам нужно сделать – это добавить эффект наведения, который масштабируется из уже указанной позиции. Здесь давайте выберем значение circle() .

Чтобы код поддерживался и читался проще, давайте воспользуемся переменными CSS. Так нам не нужно дублировать весь clip-path . Изменим только необходимые переменные CSS.

Посмотрите ниже как это работает.

Мало того, мы можем очень легко изменить положение анимации. Я создал интерактивную демонстрацию, где можно изменять позиции в выпадающем меню.

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

Эффект пульсации

Эффект ряби обрёл популярность с релиза Material Design. С помощью clip-path этот эффект легко воспроизводится, вот так:

Полезно знать

Невидимые области не получают события указателя.
Когда область обрезана, всё, что находится за её пределами, не получает никаких событий указателя. Это означает, что пользователь не сможет навести курсор на обрезанную часть.

Можно пользоваться относительными значениями.
Хочется привязать позицию clip-path к font-size ? Это можно сделать! Воспользуйтесь единицами em или rem для clip-path – и всё готово.

Источник

Adblock
detector