Знакомство с CSS свойством clip path


Содержание материала:

Красивые треугольники на чистом CSS без костылей

Статья является переводом [оригинал статьи]

Исправляем CSS велосепидирование для создания геометрических фигур с помощью clip-path

Каждый, кто пытался создать стрелки или треугольники при помощи HTML и CSS знает, что для этого приходится использовать какой-либо хак. Наиболее популярным методом является создание таких элементов при помощи свойства border или с использованием unicode символов.

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

Используем Clip-path

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

Допустим, у вас есть простой div элемент с фоновым изображением:

Чтобы превратить его в треугольник нам потребуется функция polygon() . Она принимает в качестве параметров точки, которые определяют форму нашей фигуры. Для треугольника это 3 точки. Давайте попробуем изменить значения, чтобы увидеть как изменится фигура.

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

Поддержка браузерами

Если вы откроете caniuse, то увидите, что все весьма неплохо, особенно в случае с Chrome. Если хотите добиться поддержки в старых версиях Safary, то используйте префикс -webkit- . FireFox имеет поддержку clip-path начиная с версии 53. IE/Edge как всегда бежит позади планеты всей, однако мы можем надеяться на реализацию поддержки в Edge в будущем.

Для ознакомления

Свойство clip-path можно использовать и в множестве других трюков, в том числе и с SVG. Вы можете найти больше информации по следующим ссылкам:

  • Статья о clip-path на MDN
  • Туториал на Codrops
  • Clippy — clip-path генератор

Знакомство с созданием изображений на чистом CSS. Часть первая. Для начинающих

Рассказывает Майкл Мэнгиаларди, фронтенд-разработчик и векторный иллюстратор

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

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

Дело в том, что оба навыка, по сути, заключаются в соединении различных компонентов для создания конечного продукта. Иллюстраторы соединяют воедино различные фигуры и работают с формами для того, чтобы в итоге получить рисунок. Фронтенд-разработчики, в свою очередь, соединяют воедино компоненты кода для создания веб-страницы.

Изучение основ векторной графики знакомит вас с макетами, цветовыми паттернами, динамикой форм и в целом с творчеством, которое присутствует в работе фронтенд-разработчика.

Helastel, удалённо, от 150 000 ₽

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

Создание изображения на чистом CSS подразумевает, что вместо программного обеспечения для создания векторных иллюстраций (такого, как Inkscape, Illustrator, Affinity Designer или Sketch) вы напрямую работаете с CSS-кодом.

Несмотря на схожесть профессий, я думаю, что иллюстратору тонна CSS-кода, необходимого для создания изображения, может показаться устрашающей, впрочем, как и фронтенд разработчику — перспектива создания изображения с помощью кода.

По этой причине представляю вашему вниманию руководство по созданию вашего первого изображения на чистом CSS, которое, как я надеюсь:

  • повысит доверие к созданию картинок на чистом CSS;
  • поможет понять, как создаются изображения на чистом CSS;
  • если вы фронтенд-разработчик, то увеличит интерес к векторной графике;
  • если вы векторный иллюстратор, то увеличит интерес к фронтенд-разработке;
  • снабдит базовым шаблоном для создания изображений на чистом CSS.

Компоненты изображений на чистом CSS

Для начала разберёмся, что такое «чистый CSS».

Создание изображений на «чистом CSS» подразумевает добавление CSS-стилей нескольким HTML-тегам div .

К примеру, мы можем создать квадрат всего лишь одним div и применённым к нему стилем:

Мы будем создавать фигуры, стилизуя блоки, чтобы сформировать из них финальную картинку.

Каждый проект на чистом CSS будет состоять из следующих компонентов:

  • тег div для каждой фигуры;
  • определенный CSS-класс, присвоенный каждому div ;
  • невидимый блок, который будет служить в качестве холста.

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

See the Pen Koala | Animals #1 by Mike Mangialardi (@mikemang) on CodePen.

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

Структура фигур

Во-первых, всё изображение коалы было построено поверх невидимого квадратного холста (это не официальный термин). Это невидимое поле будет располагаться в центре body , а голова — в центре поля. Лично мне кажется, что это хорошая практика, которая упрощает отзывчивый дизайн (подробнее об этом в конце статьи).

А пока просто имейте в виду, что нам предстоит иметь дело с невидимым прямоугольным полем, которое я выделил ниже:

Во-вторых, у нас есть круг в центре веб-страницы, на основе которого мы будем создавать голову.

Далее мы создадим уши, которые располагаются по бокам головы. Каждое ухо состоит из двух разноцветных кругов, которые накладываются друг на друга, один круг немного меньше другого. Мы будем проводить различие между div уха и div «внутреннего уха».

Кроме того, у нас есть два глаза, которые также являются кругами, наложенными один поверх другого. Они отличаются цветом и размером: больший круг — белый, а круг поменьше (зрачок) — черный.

Далее мы создадим нос в виде коричневого прямоугольника с закруглёнными углами, и расположим его под глазами.

И последний штрих — два пучка серых волос в форме треугольников, имеющих разное положение на макушке коалы.

Еще одна важная вещь, о которой стоит упомянуть — это то, что для создания изображения мы также будем использовать разные слои. Уши будут позади головы, нос — перед глазами и т.д. Это станет понятнее, когда мы перейдем к работе с CSS.

Примечание чтобы добавить нашей коале волосы, мы будем использовать метод clip-path . Он поддерживается в Chrome, Safari и Opera. Если вы пользуетесь Firefox, советую сменить его на другой браузер на время изучения этого руководства.

Как правило, я добавляю один div , который будет фигурой, затем я стилизую её, а после приступаю к следующему div .

Однако, поскольку это инструкция, давайте сначала взглянем на HTML-код и разберем его:

Важно заметить, что некоторые div вложены в другие. Давайте посмотрим на div правого уха нашей коалы:

«Ear-right» (правое ухо) является родительским div , а «inner-ear» (внутреннее ухо) — дочерним.

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

Например, представим, что у нас есть div , вложенный в body с height: 100% и width: 100% :

Классу some-div назначается фиксированная позиция, которая на 10% ниже верхней части родительского блока. Так как some-div встроен в body , который имеет 100% ширины и 100% высоты, div будет расположен на 10% ниже верхней части этого блока.

Теперь вложим другой div в some-div и зададим ему такой же стиль:

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

В этом примере another-div (синий квадрат) на 10% ниже, чем some-div (красный квадрат).

Теперь переместим another-div из some-div в body и увеличим отступ до 30%:

another-div теперь отступает на 30% от верха body , а не some-div .

Имея это в виду, перейдем к стилям CSS.

CSS стили

Для начала зададим body фоновый цвет. Пусть это будет оттенок синего, как у Твиттера:

Теперь добавим стили невидимому блоку. Он будет отцентрирован по горизонтали (чтобы следить за изменением положения поля, добавьте ему фон или рамку):

position: relative означает, что элемент позиционируется относительно своего нормального положения, которое находится в верхнем левом углу, так как это первый div в body .

Когда свойство position установлено в relative , используйте display: block; и margin: auto; , чтобы автоматически отцентрировать поле по горизонтали.

Затем мы можем добавить следующую часть кода, чтобы поместить поле на 8% ниже, а также установить height и width с размерами, как на изображении выше, и, наконец, присвоить необходимое значение фона:

Отметим, что мы используем свойство margin-top: 8% , чтобы опустить поле на 8%. Поскольку мы специально настраиваем top , это не отразится на наших предыдущих отступах, заданных через margin:auto .

Теперь, когда поле настроено, все наши остальные div будут вложены в него. Опять же, это важно, потому что когда мы будем назначать абсолютные положения в процентах, это расположит div на столько же процентов от поля, но не от body . Этот же принцип будет работать и с нашими высотой и шириной.

Голова

Посмотрим на код для создания головы, а затем разберем его шаг за шагом:

Процентные показатели для top и left означают, что div будет в 15% от верхнего края поля и в 25% — от левого. Ширина div — 50% от ширины поля, а высота — 67% от высоты поля. После этого мы устанавливаем светло-серый цвет фона.

Далее мы используем border-radius: 50% . Если вы пропустите это свойство, голова всегда будет в форме прямоугольника (или квадрата). border-radius является тем свойством, которое меняет фигуру. Если вы знакомы с Illustrator, то можете сравнить добавление свойства border-radius с тем, как в нём нужно потянуть за края квадрата, чтобы закруглить его. Чтобы округлить форму до круга, мы всегда используем показатель, равный 50%.

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

Прежде чем мы пойдем дальше, я объясню, откуда я взял процентные показатели верхней и левой границ, ширины и высоты. Мы задали полю ширину в 600 пикселей, так что 50% дают нам 300 пикселей. Учитывая, что поле было высотой всего в 400 пикселей, процентный показатель для головы должен быть выше.

Скорее всего вы ждете, что я дам вам точную формулу для вычисления высоты. Честно говоря, обычно я нахожу нужное значение методом тыка.

Чем больше изображений вы создадите на чистом CSS, тем быстрее вы будете находить оптимальные значения. Но о чем вам действительно нужно подумать сейчас, так это о высоте и ширине родительского div и о том, какой размер необходим дочернему div по отношению к его предку.

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

Теперь этот фрагмент кода работает для div нашей головы, потому что мы хотим разместить её по центру. Однако мы, к примеру, не хотим помещать в самый центр уши. Мы скоро подойдем к этому моменту, и я также объясню, когда использовать bottom и right вместо top и left .

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

Вот что мы должны получить на данном этапе:

Копия головы

Div копии головы делается исключительно для того, чтобы уши могли появиться за головой. Для этого используется свойство z-index . Обратите внимание на последнюю строку предыдущего фрагмента кода:

z-index используется для обозначения уровня расположения div относительно других по оси, направленной перпендикулярно экрану (то есть на вас или от вас). С помощью этого свойства задаются слои.

В нашем финальном изображении глаза будут над головой, нос — над глазами и т.д. Всё это будет контролироваться с помощью z-index . Чем больше значение z-index, тем выше расположен div .

Так что если у вас два div, z-index: 1 будет вашим нижним слоем, а z-index: 2 — верхним. Когда мы добавляем копию головы, мы даём ей значение z-index: 2 , значит, уши нашей коалы будут располагаться за головой.

Если хотите, можете убрать копию головы, когда мы добавим уши, и посмотреть, что получится.

Мы не должны увидеть каких-либо изменений . Изображение по-прежнему выглядит следующим образом:

Как говорилось ранее, у нас будет по одному уху, состоящему из кругов, для каждой стороны. Два светло-серых круга побольше и два темно-серых круга поменьше поверх каждого уха (назовём их внутренними ушами — inner-ear).

Для каждого класса мы используем border-radius:50% , так как нам нужны круги, а затем добавляем цвет, используя background .
Как вы видите, мы написали два разных стиля для ушей, но только один для внутреннего уха. Это станет очевидным, когда мы разберемся с позиционированием.

Родительским div для правого и левого уха является голова. Таким образом, процентные показатели будут рассчитываться относительно головы, так же как высота и ширина. Рассчитываем высоту и ширину, основываясь на том, что мы хотим большие уши, которые, однако, должны быть меньше головы. Таким образом, мы получаем width:60% и height:65% .

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

Так как left и right рассчитываются относительно ушей, мы можем использовать один и тот же стиль для левого и правого уха, поэтому у нас всего один div внутреннего уха. Мы вынуждены использовать два раздельных div для ушей, потому что они будут иметь различные показатели left и right , т.к. они позиционируются относительно головы.

Мы хотим, чтобы уши торчали слева и справа от головы. Мы используем отрицательные значения left: -20% и right: -20% для сдвига в указанном направлении.

Вот что получилось в итоге:

Напоследок мы добавляем z-index: 1 ; так что наши уши отправляются под голову. Вот что должно у нас получиться:

Глаза

Как вы видите, глаза нашей коалы похожи на её уши. У нас есть два больших белых круга (левый и правый глаз) и один зрачок.

Для них мы используем border-radius:50% , так как они являются кругами, а также используем background , чтобы задать соответствующий цвет.

У нас есть зрачок, который помещается в каждый глаз. Мы угадываем height и width зрачка, размещаем его по центру и получаем такой результат:

Для определения отступов левого глаза вы также можете использовать метод проб и ошибок или вышеприведённую формулу. Между тем, показатели height и width мы просто угадываем, пока не найдем оптимальное значение.

Что касается z-index , следующие значения позволят поместить нос прямо над глазами:

В итоге у нас должна получиться вот такая картинка:

Теперь займемся носом. Все значения мы подбираем аналогично, вот оптимальные:

Мы задаем коричневый цвет для фона, используя background , и глубину с помощью z-index:4 , чтобы нос оказался над глазами.

Мы также используем border-radius: 50px , с помощью которого закругляем углы прямоугольника так, как нам нужно. Когда фигуру нужно закруглить совсем чуть-чуть, проще указывать количество пикселей, а не процентов.

Теперь у нас получается вот такое изображение:

Волосы

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

Как видите, здесь мы не используем border-radius , но у нас есть вот такой код с clip-path :

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

Это может казаться немного непонятным, но, к счастью, есть прекрасный инструмент Clippy, который выдаёт clip-path для различных фигур. Справа вы увидите множество различных фигур:

На изображении выше выбран треугольник, так что вы можете скопировать clip-path и вставить его в CSS-класс для волос.

Мы снова задаем цвет с помощью background и устанавливаем width и height в 20% для обоих пучков. Мы задаем левому пучку значение left: 30% , а правому — left: 48% . Это хороший пример для обсуждения, что использовать: right или left . Предположим, что мы хотим передвинуть правый пучок на 5% вправо. Мы можем добавить 5% к 48%, чтобы получить значение left:53% . Однако правилом хорошего тона считается переход с left на right и наоборот при значении выше 50%. Поэтому left: 53% будет эквивалентно right:47% .

Верхние сдвиги будут отрицательными, поскольку мы хотим, чтобы оба пучка волос торчали над головой. Левый пучок будет торчать чуть сильнее, так что мы задаем ему height: 8% , а правый пучок — чуть меньше, с показателем height: 4% .

Наша картинка коалы готова!

В итоге CSS-код должен выглядеть так:

Дальнейшая практика

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

Также я предлагаю вам два бесплатных способа прокачать свои навыки по этой теме:

Как получить из SVG координаты для css clip-path?

Как верно сформулировать вопрос не знаю но суть такая:
Имеем некий svg => path=»M. z».
Я хочу получить из него css => clip-path .

Разумеется что Google и Yandex я загнул но не знаю верные ли я пишу теги для поиска .
Писал так: svg path to clip-path .

Нашёлся такой плагин в NPM: https://www.npmjs.com/package/clip-svg
Описание там конечно Жесть . что в READMY что в описание по ссылке

Есть ли какой то способ получить из SVG clip-path css ?
Или опытных в js поясните как пользоваться этой приблудой с NPM

  • Вопрос задан 03 июл.
  • 247 просмотров

Или опытных в js поясните как пользоваться этой приблудой с NPM

Ставишь глобально (можно и не глобально, но я думаю тебе не важно как), пиши это в консоль кароче:
npm install -g clip-svg

После установки пишешь в консоль:
clip-svg /путь/к_твоему/файлу.svg

После чего он должен вывалить прямо в консоль готовое CSS свойство.

Знакомство с CSS свойством clip path

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

CSS свойство clip

Определение и применение

CSS свойство clip определяет размеры абсолютно позиционированного элемента, в пределах которого содержимое будет видимым (остальное обрезается).

Свойство clip не работает с элементами у которых значение свойства overflow равно visible .

Поддержка браузерами

Свойство Chrome

Firefox Opera Safari IExplorer Edge
clip 1.0 1.0 7.0 1.0 8.0 12.0

Значения свойства

Значение Описание
auto Обрезка не применяется к элементу. Это значение по умолчанию.
shape Обрезает элемент. Единственное допустимое значение: rect (Top, Right, Bottom, Left) .
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

Наследуется

Анимируемое

Пример использования

Для запоминания порядка указания значений при обрезке, можно использовать английское слово TRouBLe(где T — top, R — right, B — bottom, L — left).

Пример использования свойства clip. CSS свойства

Кажется, вы используете блокировщик рекламы 🙁

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.


5 интересных трюков CSS

Те, кто занимается разработкой сайтов уже некоторое время (скажем, пару лет), наверняка ловили себя на мысли, что они, по сути, делают примерно один и тот же макет. Да, тренды появляются и уходят, однако большинство сайтов все равно выглядят одинаково: почти все используют 12-колоночную сетку (привет, Bootstrap), адаптивную разметку и так далее. На подобные сайты уже скучновато смотреть, да и пользователям они не всегда удобны.

Поэтому в этой статье я хочу затронуть те стороны CSS, о которых разработчики забывают (или вообще не знают). Может, вы и для себя откроете что-то новое (либо добавите то, о чем у меня не сказано). Итак, поехали.

1 Режимы наложения CSS

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

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

  • overlay – наложение – светлые части становятся светлее, темные – темнее;
  • darken – затемнение – выбирается темное значение;
  • color-dodge – цветовое осветление – задний фон становится более ярким, за счет этого все изображение смотрится более контрастным.

Режимы наложения можно использовать для того, чтобы сделать контент на сайте более уникальным. По сути, одно изображение имеет 15 различных цветовых вариаций, и можно выбрать любое из них, меняя всего одно значение в CSS.

Все возможные варианты наложения на примере смотрите тут .

Для того, чтобы задать режим наложения, нужно использовать mix-blend-mode:

Свойство применимо ко всем элементам, то если при его указании элемент будет смешивать свои цвета с другими накладывающимися элементами.

Что делать, если с каким-то элементом режим наложения не нужен? Изолировать его:

Теперь к содержащему div изображению не будет применяться режим наложения.

Как на практике применять подобный эффект? Допустим, вам нужно подогнать все изображения под определенную тему. Вместо того, чтобы открывать графический редактор, вы можете просто добавить нужный режим наложения – и вуаля, нужный эффект достигнут:

2 Маскирование

Маскирование (masking) — это одна из популярных операций (наряду с отсечением), которая используется для скрытия части элемента. Части под маской будут частично или полностью непрозрачны. При помощи масок на странице можно создать изображение интересной, креативной формы.

Существует три способа сделать маскирование: использовать изображение с прозрачными частями (например, png), использовать CSS градиент либо SVG-элементы.

В отличие от растровых изображений, состоящих из пикселей, векторные изображения SVG можно масштабировать и изменять практически без потери качества.

Маску можно использовать для создания интересных эффектов. Например, если использовать вот такое изображение и маску:

То на странице при прокручивании вниз можно сделать так, чтобы буквы постепенно бледнели и заходили за скалы:

3 Отсечение

Отсечение (clipping) уже упоминалось выше — еще один способ поменять форму изображения. Принцип работы — все, что входит в выбранную область, будет отображено; все, что остается за краями, отображаться не будет.

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

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

Тем не менее свойство clip уже устарело — сейчас используется свойство clip-path.

Clip-path можно использовать либо на CSS (здесь доступны разные фигуры: polygon, circle, ellipse и так далее); либо на SVG (здесь для обертывания элемента будет использоваться элемент clipPath).

CSS

SVG

4 Формы CSS

Здесь речь пойдет о shape-outside и shape-inside.

Shape-outs >используется для того, чтобы создать внутри элемента форму, и вокруг этой формы и будет происходить обтекание.

А выглядеть это может вот так:

На странице shape-outside можно использовать, чтобы сделать вот такую красоту:

Shape-ins >, наоборот, создает форму, внутри которой будет происходить обтекание.

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

5 Анимация с использованием SVG

SVG — формат, который уже активно используется в вебе. Он векторный (SVG — Scalable Vector Graphics — масштабируемая векторная графика), а значит, изображение будет нормально отображаться на экране с любым разрешением.

Но использование в качестве отдельной картинки — это не единственное, что для чего вы можете использовать SVG. Этот формат отлично подойдет для анимации с помощью CSS.

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

У SVG, помимо прочих преимуществ, есть еще важное отличие от растровых изображений: текст, вставленный в SVG, хранится в теге

, то есть его можно найти, с ним можно взаимодействовать прямо в коде.

Создание SVG-анимации при помощи CSS в целом похоже на анимирование любого другого элемента в HTML: нужно использовать переходы, трансформацию и ключевые кадры.

Самое удивительное при работе с SVG: вы можете взять любую часть и анимировать ее при помощи CSS. А значит, можно делать интересные динамические эффекты даже без использования JS. SVG имеет собственное DOM API, и если вы хотите углубиться в изучение этой темы, обязательно остановите свое внимание на DOM API.

А для начала я советую изучить вот эту статью .

Примеры красочных анимированных рисунков смотрите здесь и здесь .

Заключение

В этой статье перечислены 5 интересных возможностей CSS — но, конечно, их гораздо больше, многое осталось за пределами этой статьи. А чем вы пользуетесь в разработке? Что используете, чтобы сделать сайт интереснее?

Animating with Clip-Path

Easily manage projects with monday.com

clip-path is one of those CSS properties we generally know is there but might not reach for often for whatever reason. It’s a little intimidating in the sense that it feels like math class because it requires working with geometric shapes, each with different values that draw certain shapes in certain ways.

We’re going to dive right into clip-path in this article, specifically looking at how we can use it to create pretty complex animations. I hope you’ll see just how awesome the property and it’s shape-shifting powers can be.

But first, let’s do a quick recap of what we’re working with.

Clip-path crash course

Just for a quick explanation as to what the clip-path is and what it provides, MDN describes it like this:

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

Consider the circle shape provided by clip-path . Once the circle is defined, the area inside it can be considered «positive» and the area outside it «negative.» The positive space is rendered while the negative space is removed. Taking advantage of the fact that this relationship between positive and negative space can be animated provides for interesting transition effects… which is what we’re getting into in just a bit.

clip-path comes with four shapes out of the box, plus the ability to use a URL to provide a source to some other SVG element. I’ll let the CSS-Tricks almanac go into deeper detail, but here are examples of those first four shapes.

Shape Example Result
Circle clip-path: circle(25% at 25% 25%);
Ellipse clip-path: ellipse(25% 50% at 25% 50%);
Inset clip-path: inset(10% 20% 30% 40% round 25%);
Polygon clip-path: polygon(50% 25%, 75% 75%, 25% 75%);

Combining clippings with CSS transitions

Animating clip-path can be as simple as changing the property values from one shape to another using CSS transitions, triggered either by changing classes in JavaScript or an interactive change in state, like :hover :

We can also use CSS animations:

Some things to consider when animating clip-path :

  • It only affects what is rendered and does not change the box size of the element as relating to elements around it. For example, a floated box with text flowing around it will still take up the same amount of space even with a very small percentage clip-path applied to it.
  • Any CSS properties that extend beyond the box size of the element may be clipped. For example, an inset of 0% for all four sides that clips at the edges of the element will remove a box-shadow and require a negative percentage to see the box-shadow . Although, that could lead to interesting effects in of itself!

OK, let’s get into some light animation to kick things off.

Comparing the simple shapes

I’ve put together a demo where you can see each shape in action, along with a little explanation describing what’s happening.

The demo makes use of Vue for the functionality, but the CSS is easily transferred to any other type of project.

We can break those out a little more to get a handle on the values for each shape and how changing them affects the movement

Circle

Circle accepts two properties that can be animated:

  1. Shape radius: can be a length or percentage
  2. Position: can be a length or percentage along the x and y axis

The circle shape is resized in the leave transition from an initial 75% radius (just enough to allow the element to appear fully) down to 0%. Since no position is set, the circle defaults to the center of the element both vertically and horizontally. The enter transition plays the animation in reverse by means of the «reverse» keyword in the animation property.

Ellipse

Ellipse accepts three properties that can be animated:

  1. Shape radius: can be a length or percentage on the horizontal axis
  2. Shape radius: can be a length or percentage on the vertical axis
  3. Position: can be a length or percentage along the x and y axis

The ellipse shape is resized in the leave transition from an initial 80% by 80%, which makes it a circular shape larger than the box, down to 0% by 20%. Since no position is set, the ellipse defaults to the center of the box both vertically and horizontally. The enter transition plays the animation in reverse by means of the «reverse» keyword in the animation property.

The effect is a shrinking circle that changes to a shrinking ellipse taller than wide wiping away the first element. Then the elements switch with the second element appearing inside the growing ellipse.

Inset

The inset shape has up to five properties that can be animated. The first four represent each edge of the shape and behave similar to margins or padding. The first property is required while the next three are optional depending on the desired shape.

  1. Length/Percentage: can represent all four sides, top/bottom sides, or top side
  2. Length/Percentage: can represent left/right sides or right side
  3. Length/Percentage: represents the bottom side
  4. Length/Percentage: represents the left side
  5. Border radius: requires the «round» keyword before the value

One thing to keep in mind is that the values used are reversed from typical CSS usage. Defining an edge with zero means that nothing has changed, the shape is pushed outward to the element’s side. As the number is increased, say to 10%, the edge of the shape is pushed inward away from the element’s side.

The inset shape is resized in the leave transition from a full-sized square down to a circle because of the rounded corners changing from 0% to 50%. Without the round value, it would appear as a shrinking square. The enter transition plays the animation in reverse by means of the «reverse» keyword in the animation property.

The effect is a shrinking square that shifts to a shrinking circle wiping away the first element. After the elements switch the second element appears within the growing circle that shifts to a growing square.

Polygon

The polygon shape is a somewhat special case in terms of the properties it can animate. Each property represents vertices of the shape and at least three is required. The number of vertices beyond the required three is only limited by the requirements of the desired shape. For each keyframe of an animation, or the two steps in a transition, the number of vertices must always match for a smooth animation. A change in the number of vertices can be animated, but will cause a popping in or out effect at each keyframe.

The eight vertices in the polygon shape make a square with a vertex in the four corners and the midpoint of all four sides. On the leave transition, the shape’s corners animate inwards to the center while the side’s midpoints animate inward halfway to the center. The enter transition plays the animation in reverse by means of the «reverse» keyword in the animation property.

The effect is a square that collapses inward down to a plus shape that wipes away the element. The elements then switch with the second element appears in a growing plus shape that expands into a square.

Let’s get into some simple movements

OK, we’re going to dial things up a bit now that we’ve gotten past the basics. This demo shows various ways to have movement in a clip-path animation. The circle and ellipse shapes provide an easy way to animate movement through the position of the shape. The inset and polygon shapes can be animated in a way to give the appearance of position-based movement.

Let’s break those out just like we did before.

The slide down transition consists of two different animations using the inset shape. The first, which is the leave animation, animates the top value of the inset shape from 0% to 100% providing the appearance of the entire square sliding downward out of view. The second, which is the enter animation, has the bottom value at 100% and then animates it down towards 0% providing the appearance of the entire square sliding downward into view.

As you can see, the number of sides being defined in the inset path do not need to match. When the shape needs to be the full square, a single zero is all that is required. It can then animate to the new state even when the number of defined sides increases to four.

Box-Wipe

The box-wipe transition consists of two animations, again using the inset shape. The first, which is the leave animation, animates the entire square down to a half-size squared positioned on the element’s left side. The smaller square then slides to the right out of view. The second, which is the enter animation, animates a similar half-size square into view from the left over to the element’s right side. Then it expands outward to reveal the entire element.

When the full element is shown, the inset is at zero. The 50% keyframes define a half-size square that is placed on either the left or right. There are two values representing the left and right edges are swapped. Then the square is then moved to the opposite side. As one side is pushed to 100%, the other must go to -50% to maintain the shape. If it were to animate to zero instead of -50%, then the square would shrink as it animated across instead of moving out of view.

Rotate

The rotate transition is one animation with five keyframes using the polygon shape. The initial keyframe defines the polygon with four vertices that shows the entire element. Then, the next keyframe changes the x and y coordinates of each vertex to be moved inward and near the next vertex in a clockwise fashion. After all four vertices have been transitioned, it appears the square has shrunk and rotated a quarter turn. The following keyframes do the same until the square is collapsed down to the center of the element. The leave transition plays the animation normally while the enter transition plays the animation in reverse.

Polygons can be animated into any other position once its vertices have been set, as long as each keyframe has the same number of vertices. This can make many interesting effects with careful planning.

Spotlight

The spotlight transition is one animation with five keyframes using the circle shape. The initial keyframe defines a full-size circle positioned at the center to show the entire element. The next keyframe shrinks the circle down to twenty percent. Each following keyframe animates the position values of the circle to move it to different points on the element until it moves out of view to the left. The leave transition plays the animation normally while the enter transition plays the animation in reverse.

This may be a complex-looking animation at first, but turns out it only requires simple changes in each keyframe.

More adventurous stuff

Like the shapes and simple movements examples, I’ve made a demo that contains more complex animations. We’ll break these down individually as well.

All of these examples make heavy use of the polygon shape. They take advantage of features like stacking vertices to make elements appear «welded» and repositioning vertices around for movement.

Check out Ana Tudor’s «Cutting out the inner part of an element using clip-path» article for a more in-depth example that uses the polygon shape to create complex shapes.

Chevron

The chevron transition is made of two animations, each with three keyframes. The leave transition starts out as a full square with six vertices; there are the four corners but there are an additional two vertices on the left and right sides. The second keyframe animates three of the vertices into place to change the square into a chevron. The third keyframe then moves the vertices out of view to the right. After the elements switch, the enter transition starts with the same chevron shape but it is out of view on the left. The second keyframe moves the chevron into view and then the third keyframe restores the full square.

Spiral

The spiral transition is a strong example of a complicated series of vertices in the polygon shape. The polygon is created to define a shape that spirals inward clockwise from the upper-left of the element. Since the vertices create lines that stack on top of each other, it all appears as a single square. Over the eight keyframes of the animation, vertices are moved to be on top of neighboring vertices. This makes the shape appear to unwind counter-clockwise to the upper-left, wiping away the element during the leave transition. The enter transition replays the animation in reverse.

Slots

The slots transition is made of a series of vertices arranged in a pattern of vertical slots with vertices stacked on top of each other for a complete square. The general idea is that the shape starts in the upper-left and the next vertex is 14% to the right. Next vertex is in the exact same spot. Then the one after that is another 14% to the right, and so on until the upper-right corner is reached. This creates a series of «sections» along the top of the shape that are aligned horizontally. The second keyframe then animates every even section downward to the bottom of the element. This gives the appearance of vertical slots wiping away their parts of the element. The third keyframe then moves the remaining sections at the top to the bottom. Overall, the leave transition wipes away half the element in vertical slots and then the other half. The enter transition reverses the animation.

Shutters

The shutters transition is very similar to the slots transition above. Instead of sections along the top, it creates vertical sections that are placed in line with each other to create the entire square. Starting with the upper-left the second vertex is positioned at the top and 20% to the right. The next vertex is placed in the same place horizontally but is at the bottom of the element. The next vertex after that is in the same spot with the next one back at the top on top of the vertex from two steps ago. This is repeated several times across the element until the right side is reached. If the lines of the shape were visible, then it would appear as a series of vertical sections lined up horizontally across the element. During the animation the left side of each section is moved over to be on top of the right side. This creates a wiping effect that looks like vertical shutters of a window. The enter transition plays the animation in reverse.

The star transition takes advantage of how clip-path renders positive and negative space when the lines defining the shape overlap and cross each other. The shape starts as a square with eight vertices; one in each corner and one on each side. There are only three keyframes but there’s a large amount of movement in each one. The leave transition starts with the square and then moves each vertex on a side to the opposite side. Therefore, the top vertex goes to the bottom, the bottom vertex goes to the top, and the vertices on the left and right do the same swap. This creates criss-crossing lines that form a star shape in the positive space. The final keyframe then moves the vertices in each corner to the center of the shape which makes the star collapse in on itself wiping the element away. The enter transition plays the same in reverse.

Path shapes

OK, so we’ve looked at a lot of examples of animations using clip-path shape functions. One function we haven’t spent time with is path . It’s perhaps the most flexible of the bunch because we can draw custom, or even multiple, shapes with it. Chris has written and even spoken on it before.

So, while I created demo for this set of examples as well, note that clip-path paths are experimental technology. As of this writing, it’s only available in Firefox 63 or higher behind the layout.css.clip-path-path.enabled flag, which can be enabled in about:config .

An advantage to using paths is that it can consist of multiple shapes within the path, each animated separately to have fine-tune control over the positive and negative space. Another interesting aspect is that the path supports Bézier curves. Creating the vertices is similar to the polygon shape, but polygon doesn’t support Bézier curves. A bonus of this feature is that even the curves can be animated.

That said, a disadvantage is that a path has to be built specifically for the size of the element. That’s because there is no percentage-based placement, like we have with the other clip-path shapes . So, all the demos for this article have elements that are 200px square, and the paths in this specific demo are built for that size. Any other size or dimensions will lead to different outcomes.

Alright, enough talk. Let’s get to the examples because they’re pretty sweet.

The iris transition consists of four small shapes that form together to make a complete large shape that splits in an iris pattern, much like a sci-fi type door. Each shape has its vertices moved and slightly rotated in the direction away from the center to move off their respective side of the element. This is done with only two keyframes. The leave transition has the shapes move out of view while the enter transition reverses the effect. The path is formatted in a way to make each shape in the path obvious. Each line that starts with «M» is a new shape in the path.

The melt transition consists of two different animations for both entering and leaving. In the leave transition, the path is a square but the top side is made up of several Bézier curves. At first, these curves are made to be completely flat and then are animated downward to stop beyond the bottom of the shape. As these curves move downward, they are animated in different ways so that each curve adjusts differently than the others. This gives the appearance of the element melting out of view below the bottom.

The enter transition does much the same, except that the curves are on the bottom of the square. The curves start at the top and are completely flat. Then they are animated downward with the same curve adjustments. This gives the appearance of the second element melting into view to the bottom.

The door transition is similar to the iris transition we looked at first — it’s a «door» effect with shapes that move independently of each other. The path is made up of four shapes: two are half-circles located at the top and bottom while the other two split the left over positive space. This shows that, not only can each shape in the path animate separately from each other, they can also be completely different shapes.

In the leave transition, each shape moves away from the center out of view on its own side. The top half-circle moves upward leaving a hole behind and the bottom half-circle does the same. The left and right sides then slide away in a separate keyframe. Then the enter transition simply reverses the animation.

X-Plus

This transition is different than most of the demos for this article. That’s because other demos show animating the «positive» space of the clip-path for transitions. It turns out that animating the «negative» space can be difficult with the traditional clip-path shapes. It can be done with the polygon shape but requires careful placement of vertices to create the negative space and animate them as necessary. This demo takes advantage of having two shapes in the path; there’s one shape that’s a huge square surrounding the space of the element and another shape in the center of this square. The center shape (in this case an x or + ) excludes or «carves» out negative space in the outside shape. Then the center shape’s vertices are animated so that only the negative space is being animated.

The leave animation starts with the center shape as a tiny «x» that grows in size until the element is wiped from view. The enter animation the center shape is a «+» that is already larger than the element and shrinks down to nothing.

Drops

The drops transition takes advantage of the ability to have multiple shapes in the same path. The path has ten circles placed strategically inside the area of the element. They start out as tiny and unseen, then are animated to a larger size over time. There are ten keyframes in the animation and each keyframe resizes a circle while maintaining the state of any previously resized circle. This gives the appearance of circles popping in or out of view one after the other during the animation.

The leave transition has the circles being shrunken out of view one at a time and the negative space grows to wipe out the element. The enter transition plays the animation in reverse so that the circles enlarge and the positive space grows to reveal the new element.

The CSS used for the drops transition is rather large, so take a look at the CSS section of the CodePen demo starting with the .drops-enter-active selector.

Numbers

This transition is similar to the x-plus transition above — it uses a negative shape for the animation inside a larger positive shape. In this demo, the animated shape changes through the numbers 1, 2, and 3 until the element is wiped away or revealed. The numeric shapes were created by manipulating the vertices of each number into the shape of the next number. So, each number shape has the same number of vertices and curves that animate correctly from one to the next.

The leave transition starts with the shape in the center but is made to be unseen. It then animates into the shape of the first number. The next keyframe animates to the next number and so no, then plays in reverse.

The CSS used for this is ginormous just like the last one, so take a look at the CSS section of the CodePen demo starting with the .numbers-enter-active selector.

Hopefully this article has given you a good idea of how clip-path can be used to create flexible and powerful animations that can be both straightforward and complex. Animations can add a nice touch to a design and even help provide context when switching from one state to another. At the same time, remember to be mindful of those who may prefer to limit the amount of animation or movement, for example, by setting reduced motion preferences.

Понятно про CSS Masking и Shapes Modules, или Будущая революция дизайна контента

Доброго времени суток уважаемые хабражители. На сегодняшний день с помощью CSS можно создать множество различных элементов. Это безусловно очень радует, вспоминая веб несколько лет назад. Но порой так «устаешь» от всех этих изощрений с :before и :after… Недавно я нашел две интересных спецификации CSS Masking Level 1 и CSS Shapes Level 2, благодаря которым в недалеком будущем перед нами откроются совершенно новые возможности оформления контента и разработки форм элементов.

CSS Masking

Совместимость

Все современные браузеры поддерживают свойства mask и clip-path, как определено в SVG 1.1 для элементов SVG. Но только Firefox позволяет применять эти свойства к HTML элементам, причем без префиксов. Но говоря конкретно про спецификацию CSS Masking, то свойства mask, clip-path, mask-box-image поддерживаются только на последних Webkit/Blink с префиксом webkit.

clip-path

Свойство clip-path создает область отсечения для любого из HTML элементов или графических элементов, в том числе элементам-контейнерам SVG — clipPath. Образовавшиеся элементы возможно анимировать. Одно впечатляющее демо (к сожалению работает только на последних Chrome).

    Описывает прямоугольник, значения x и y определяют позицию формы, width и height — ширину и высоту, rx и ry — радиус углов.

Описывает круг, значения cx и cy определяют координаты центра круга, r — радиус.

Описывает окружность, значения cx и cy определяют координаты центра окружности, rx и ry — радиус.

Описывает многоугольник на основе переданных координат.


  • Описывает форму заданную выбранным изображением или SVG файлом.
  • Маски

    Помимо обрезания спецификация регламентирует наложение маски в CSS (также как в Photoshop). Изображение-маска используется как «цветовая сетка» для фильтрации видимых частей элемента. Маски делятся на два вида: маска цветовой насыщенности (Luminance Mask) и альфа маска (Alpha Mask).

    Маска цветовой насыщенности

    Изображение маски цветовой насыщенности (рис. сверху слева) превращается в растеризованное изображение шкалы яркости (если оно уже не в шкале яркости). Чем «светлее» часть изображения-маски, тем больше в данном месте будет виден элемент.

    Альфа маска

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

    Значения и функции приведенных ниже свойств полностью эквиваленты backgroud:

    • mask
    • mask-image
    • mask-repeat
    • mask-position
    • mask-clip
    • mask-origin
    • mask-size

    mask-box-image

    Единственным свойством не имеющего аналога в background является mask-box-image. Свойство разделяет изображение-маску на девять мозаичных элементов: четыре угла, четыре края и середину. Получившиеся части можно раскладывать на слои, масштабировать и растягивать разными способами.

    Интересной особенностью является то, что маской может быть CSS градиент. А значения x-repeat и y-repeat такие же как и в border-image:

    • stretch — растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.
    • repeat — повторяет отображение маски по всей границе элемента
    • round — повторяет отображение маски и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.

    CSS Shape

    Насколько я понимаю данная спецификация это модернизированная CSS Exclusions. Если я не прав, буду благодарен комментариям разъясняющим этот момент.

    Поддержка

    CSS Shapes поддерживаются в последних сборках WebKit Nightly и Chrome Canary (в chrome://flags активируйте пункт Enable experimental WebKit features).

    Shape-outside

    Shape-outside создает форму внутри элемента, вокруг которой будет происходить обтекание. Свойство работает только для float элементов.

    Для лучшего понимания shape-outside, наглядно продемонстрировал его работу в приведенном ниже примере в inset-rectangle. Сам элемент прозрачный синего цвета, форма для обтекания внутри. Также стоит обратить внимание на то, что для всех элементов используется свойство clip-path, которое только отсекает заданную форма элемента, но никак не влияет на обтекание

      Описывает прямоугольник, значения x и y определяют позицию формы, width и height — ширину и высоту, rx и ry — радиус углов. Позиционирование формы происходит по origin к элементу.

    Описывает прямоугольник, значения x и y определяют позицию формы, width и height — ширину и высоту, rx и ry — радиус углов. Позиционирование формы происходит как для самого элемента.

    Описывает круг, значения cx и cy определяют координаты центра круга, r — радиус.

    Описывает окружность, значения cx и cy определяют координаты центра окружности, rx и ry — радиус.

    Описывает многоугольник на основе переданных координат.

  • Описывает форму заданную выбранным изображением или SVG файлом.
  • Shape-inside

    Shape-inside создает форму внутри элемента, внутри которой будет происходить обтекание.

    shape-ins >

    • Описывает прямоугольник, значения x и y определяют позицию формы, width и height — ширину и высоту, rx и ry — радиус углов. Позиционирование формы происходит по origin к элементу.

    Описывает прямоугольник, значения x и y определяют позицию формы, width и height — ширину и высоту, rx и ry — радиус углов. Позиционирование формы происходит как для самого элемента.

    Описывает круг, значения cx и cy определяют координаты центра круга, r — радиус.

    Описывает окружность, значения cx и cy определяют координаты центра окружности, rx и ry — радиус.

    Описывает многоугольник на основе переданных координат.

  • Описывает форму заданную выбранным изображением или SVG файлом.
  • Shape-image-threshold

    Данное свойство определяет порог альфа канала изображения на основе которого определяется форма. Значения от 0.0 до 0.1, по дефолту 0.5. То есть если Вы определяете форму из определенного изображения, то по дефолту зоны где непрозрачность меньше 50% не будут учтены.

    Shape-margin и shape-padding

    Специфика работы данных свойств немного отличается от стандарты margin и padding. Принцип работы очень наглядно демонстрируется на этой странице (внизу).

    Hyphens

    Не могу не упомянуть про это маленькое замечательное свойство. Оно используется в большинстве примеров с shape-inside, а одна из его функций — автоматический перенос слов со знаком переноса. Без этого свойства контент внутри определенной формы смотрелся бы ужасно. Оно уже работает в Firefox, IE, Safariудивительно, что его нет в Chrome.

    • none — Запрет переноса, разрывы строк ставятся только между слов. (Привычное отображение)
    • manual — Ручная расстановка переносов — слова разбиваются только в местах расстановки специальных символов.
    • auto — Автоматическая расстановка переносов, но приоритет отдается в местах со специальными символами.

    One more step

    Please complete the security check to access codepen.io

    Why do I have to complete a CAPTCHA?

    Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

    What can I do to prevent this in the future?

    If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

    If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

    Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

    Cloudflare Ray ID: 5327138f2f548da5 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

    Animating with Clip-Path

    Easily manage projects with monday.com

    clip-path is one of those CSS properties we generally know is there but might not reach for often for whatever reason. It’s a little intimidating in the sense that it feels like math class because it requires working with geometric shapes, each with different values that draw certain shapes in certain ways.

    We’re going to dive right into clip-path in this article, specifically looking at how we can use it to create pretty complex animations. I hope you’ll see just how awesome the property and it’s shape-shifting powers can be.

    But first, let’s do a quick recap of what we’re working with.

    Clip-path crash course

    Just for a quick explanation as to what the clip-path is and what it provides, MDN describes it like this:

    The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

    Consider the circle shape provided by clip-path . Once the circle is defined, the area inside it can be considered «positive» and the area outside it «negative.» The positive space is rendered while the negative space is removed. Taking advantage of the fact that this relationship between positive and negative space can be animated provides for interesting transition effects… which is what we’re getting into in just a bit.

    clip-path comes with four shapes out of the box, plus the ability to use a URL to provide a source to some other SVG element. I’ll let the CSS-Tricks almanac go into deeper detail, but here are examples of those first four shapes.

    Shape Example Result
    Circle clip-path: circle(25% at 25% 25%);
    Ellipse clip-path: ellipse(25% 50% at 25% 50%);
    Inset clip-path: inset(10% 20% 30% 40% round 25%);
    Polygon clip-path: polygon(50% 25%, 75% 75%, 25% 75%);

    Combining clippings with CSS transitions

    Animating clip-path can be as simple as changing the property values from one shape to another using CSS transitions, triggered either by changing classes in JavaScript or an interactive change in state, like :hover :

    We can also use CSS animations:

    Some things to consider when animating clip-path :

    • It only affects what is rendered and does not change the box size of the element as relating to elements around it. For example, a floated box with text flowing around it will still take up the same amount of space even with a very small percentage clip-path applied to it.
    • Any CSS properties that extend beyond the box size of the element may be clipped. For example, an inset of 0% for all four sides that clips at the edges of the element will remove a box-shadow and require a negative percentage to see the box-shadow . Although, that could lead to interesting effects in of itself!

    OK, let’s get into some light animation to kick things off.

    Comparing the simple shapes

    I’ve put together a demo where you can see each shape in action, along with a little explanation describing what’s happening.

    The demo makes use of Vue for the functionality, but the CSS is easily transferred to any other type of project.

    We can break those out a little more to get a handle on the values for each shape and how changing them affects the movement

    Circle

    Circle accepts two properties that can be animated:

    1. Shape radius: can be a length or percentage
    2. Position: can be a length or percentage along the x and y axis

    The circle shape is resized in the leave transition from an initial 75% radius (just enough to allow the element to appear fully) down to 0%. Since no position is set, the circle defaults to the center of the element both vertically and horizontally. The enter transition plays the animation in reverse by means of the «reverse» keyword in the animation property.

    Ellipse

    Ellipse accepts three properties that can be animated:

    1. Shape radius: can be a length or percentage on the horizontal axis
    2. Shape radius: can be a length or percentage on the vertical axis
    3. Position: can be a length or percentage along the x and y axis

    The ellipse shape is resized in the leave transition from an initial 80% by 80%, which makes it a circular shape larger than the box, down to 0% by 20%. Since no position is set, the ellipse defaults to the center of the box both vertically and horizontally. The enter transition plays the animation in reverse by means of the «reverse» keyword in the animation property.

    The effect is a shrinking circle that changes to a shrinking ellipse taller than wide wiping away the first element. Then the elements switch with the second element appearing inside the growing ellipse.

    Inset

    The inset shape has up to five properties that can be animated. The first four represent each edge of the shape and behave similar to margins or padding. The first property is required while the next three are optional depending on the desired shape.

    1. Length/Percentage: can represent all four sides, top/bottom sides, or top side
    2. Length/Percentage: can represent left/right sides or right side
    3. Length/Percentage: represents the bottom side
    4. Length/Percentage: represents the left side
    5. Border radius: requires the «round» keyword before the value

    One thing to keep in mind is that the values used are reversed from typical CSS usage. Defining an edge with zero means that nothing has changed, the shape is pushed outward to the element’s side. As the number is increased, say to 10%, the edge of the shape is pushed inward away from the element’s side.

    The inset shape is resized in the leave transition from a full-sized square down to a circle because of the rounded corners changing from 0% to 50%. Without the round value, it would appear as a shrinking square. The enter transition plays the animation in reverse by means of the «reverse» keyword in the animation property.

    The effect is a shrinking square that shifts to a shrinking circle wiping away the first element. After the elements switch the second element appears within the growing circle that shifts to a growing square.

    Polygon

    The polygon shape is a somewhat special case in terms of the properties it can animate. Each property represents vertices of the shape and at least three is required. The number of vertices beyond the required three is only limited by the requirements of the desired shape. For each keyframe of an animation, or the two steps in a transition, the number of vertices must always match for a smooth animation. A change in the number of vertices can be animated, but will cause a popping in or out effect at each keyframe.

    The eight vertices in the polygon shape make a square with a vertex in the four corners and the midpoint of all four sides. On the leave transition, the shape’s corners animate inwards to the center while the side’s midpoints animate inward halfway to the center. The enter transition plays the animation in reverse by means of the «reverse» keyword in the animation property.

    The effect is a square that collapses inward down to a plus shape that wipes away the element. The elements then switch with the second element appears in a growing plus shape that expands into a square.

    Let’s get into some simple movements

    OK, we’re going to dial things up a bit now that we’ve gotten past the basics. This demo shows various ways to have movement in a clip-path animation. The circle and ellipse shapes provide an easy way to animate movement through the position of the shape. The inset and polygon shapes can be animated in a way to give the appearance of position-based movement.

    Let’s break those out just like we did before.

    The slide down transition consists of two different animations using the inset shape. The first, which is the leave animation, animates the top value of the inset shape from 0% to 100% providing the appearance of the entire square sliding downward out of view. The second, which is the enter animation, has the bottom value at 100% and then animates it down towards 0% providing the appearance of the entire square sliding downward into view.

    As you can see, the number of sides being defined in the inset path do not need to match. When the shape needs to be the full square, a single zero is all that is required. It can then animate to the new state even when the number of defined sides increases to four.

    Box-Wipe

    The box-wipe transition consists of two animations, again using the inset shape. The first, which is the leave animation, animates the entire square down to a half-size squared positioned on the element’s left side. The smaller square then slides to the right out of view. The second, which is the enter animation, animates a similar half-size square into view from the left over to the element’s right side. Then it expands outward to reveal the entire element.

    When the full element is shown, the inset is at zero. The 50% keyframes define a half-size square that is placed on either the left or right. There are two values representing the left and right edges are swapped. Then the square is then moved to the opposite side. As one side is pushed to 100%, the other must go to -50% to maintain the shape. If it were to animate to zero instead of -50%, then the square would shrink as it animated across instead of moving out of view.

    Rotate

    The rotate transition is one animation with five keyframes using the polygon shape. The initial keyframe defines the polygon with four vertices that shows the entire element. Then, the next keyframe changes the x and y coordinates of each vertex to be moved inward and near the next vertex in a clockwise fashion. After all four vertices have been transitioned, it appears the square has shrunk and rotated a quarter turn. The following keyframes do the same until the square is collapsed down to the center of the element. The leave transition plays the animation normally while the enter transition plays the animation in reverse.

    Polygons can be animated into any other position once its vertices have been set, as long as each keyframe has the same number of vertices. This can make many interesting effects with careful planning.

    Spotlight

    The spotlight transition is one animation with five keyframes using the circle shape. The initial keyframe defines a full-size circle positioned at the center to show the entire element. The next keyframe shrinks the circle down to twenty percent. Each following keyframe animates the position values of the circle to move it to different points on the element until it moves out of view to the left. The leave transition plays the animation normally while the enter transition plays the animation in reverse.

    This may be a complex-looking animation at first, but turns out it only requires simple changes in each keyframe.

    More adventurous stuff

    Like the shapes and simple movements examples, I’ve made a demo that contains more complex animations. We’ll break these down individually as well.

    All of these examples make heavy use of the polygon shape. They take advantage of features like stacking vertices to make elements appear «welded» and repositioning vertices around for movement.

    Check out Ana Tudor’s «Cutting out the inner part of an element using clip-path» article for a more in-depth example that uses the polygon shape to create complex shapes.

    Chevron

    The chevron transition is made of two animations, each with three keyframes. The leave transition starts out as a full square with six vertices; there are the four corners but there are an additional two vertices on the left and right sides. The second keyframe animates three of the vertices into place to change the square into a chevron. The third keyframe then moves the vertices out of view to the right. After the elements switch, the enter transition starts with the same chevron shape but it is out of view on the left. The second keyframe moves the chevron into view and then the third keyframe restores the full square.

    Spiral

    The spiral transition is a strong example of a complicated series of vertices in the polygon shape. The polygon is created to define a shape that spirals inward clockwise from the upper-left of the element. Since the vertices create lines that stack on top of each other, it all appears as a single square. Over the eight keyframes of the animation, vertices are moved to be on top of neighboring vertices. This makes the shape appear to unwind counter-clockwise to the upper-left, wiping away the element during the leave transition. The enter transition replays the animation in reverse.

    Slots

    The slots transition is made of a series of vertices arranged in a pattern of vertical slots with vertices stacked on top of each other for a complete square. The general idea is that the shape starts in the upper-left and the next vertex is 14% to the right. Next vertex is in the exact same spot. Then the one after that is another 14% to the right, and so on until the upper-right corner is reached. This creates a series of «sections» along the top of the shape that are aligned horizontally. The second keyframe then animates every even section downward to the bottom of the element. This gives the appearance of vertical slots wiping away their parts of the element. The third keyframe then moves the remaining sections at the top to the bottom. Overall, the leave transition wipes away half the element in vertical slots and then the other half. The enter transition reverses the animation.

    Shutters

    The shutters transition is very similar to the slots transition above. Instead of sections along the top, it creates vertical sections that are placed in line with each other to create the entire square. Starting with the upper-left the second vertex is positioned at the top and 20% to the right. The next vertex is placed in the same place horizontally but is at the bottom of the element. The next vertex after that is in the same spot with the next one back at the top on top of the vertex from two steps ago. This is repeated several times across the element until the right side is reached. If the lines of the shape were visible, then it would appear as a series of vertical sections lined up horizontally across the element. During the animation the left side of each section is moved over to be on top of the right side. This creates a wiping effect that looks like vertical shutters of a window. The enter transition plays the animation in reverse.

    The star transition takes advantage of how clip-path renders positive and negative space when the lines defining the shape overlap and cross each other. The shape starts as a square with eight vertices; one in each corner and one on each side. There are only three keyframes but there’s a large amount of movement in each one. The leave transition starts with the square and then moves each vertex on a side to the opposite side. Therefore, the top vertex goes to the bottom, the bottom vertex goes to the top, and the vertices on the left and right do the same swap. This creates criss-crossing lines that form a star shape in the positive space. The final keyframe then moves the vertices in each corner to the center of the shape which makes the star collapse in on itself wiping the element away. The enter transition plays the same in reverse.

    Path shapes

    OK, so we’ve looked at a lot of examples of animations using clip-path shape functions. One function we haven’t spent time with is path . It’s perhaps the most flexible of the bunch because we can draw custom, or even multiple, shapes with it. Chris has written and even spoken on it before.

    So, while I created demo for this set of examples as well, note that clip-path paths are experimental technology. As of this writing, it’s only available in Firefox 63 or higher behind the layout.css.clip-path-path.enabled flag, which can be enabled in about:config .

    An advantage to using paths is that it can consist of multiple shapes within the path, each animated separately to have fine-tune control over the positive and negative space. Another interesting aspect is that the path supports Bézier curves. Creating the vertices is similar to the polygon shape, but polygon doesn’t support Bézier curves. A bonus of this feature is that even the curves can be animated.

    That said, a disadvantage is that a path has to be built specifically for the size of the element. That’s because there is no percentage-based placement, like we have with the other clip-path shapes . So, all the demos for this article have elements that are 200px square, and the paths in this specific demo are built for that size. Any other size or dimensions will lead to different outcomes.

    Alright, enough talk. Let’s get to the examples because they’re pretty sweet.

    The iris transition consists of four small shapes that form together to make a complete large shape that splits in an iris pattern, much like a sci-fi type door. Each shape has its vertices moved and slightly rotated in the direction away from the center to move off their respective side of the element. This is done with only two keyframes. The leave transition has the shapes move out of view while the enter transition reverses the effect. The path is formatted in a way to make each shape in the path obvious. Each line that starts with «M» is a new shape in the path.

    The melt transition consists of two different animations for both entering and leaving. In the leave transition, the path is a square but the top side is made up of several Bézier curves. At first, these curves are made to be completely flat and then are animated downward to stop beyond the bottom of the shape. As these curves move downward, they are animated in different ways so that each curve adjusts differently than the others. This gives the appearance of the element melting out of view below the bottom.

    The enter transition does much the same, except that the curves are on the bottom of the square. The curves start at the top and are completely flat. Then they are animated downward with the same curve adjustments. This gives the appearance of the second element melting into view to the bottom.

    The door transition is similar to the iris transition we looked at first — it’s a «door» effect with shapes that move independently of each other. The path is made up of four shapes: two are half-circles located at the top and bottom while the other two split the left over positive space. This shows that, not only can each shape in the path animate separately from each other, they can also be completely different shapes.

    In the leave transition, each shape moves away from the center out of view on its own side. The top half-circle moves upward leaving a hole behind and the bottom half-circle does the same. The left and right sides then slide away in a separate keyframe. Then the enter transition simply reverses the animation.

    X-Plus

    This transition is different than most of the demos for this article. That’s because other demos show animating the «positive» space of the clip-path for transitions. It turns out that animating the «negative» space can be difficult with the traditional clip-path shapes. It can be done with the polygon shape but requires careful placement of vertices to create the negative space and animate them as necessary. This demo takes advantage of having two shapes in the path; there’s one shape that’s a huge square surrounding the space of the element and another shape in the center of this square. The center shape (in this case an x or + ) excludes or «carves» out negative space in the outside shape. Then the center shape’s vertices are animated so that only the negative space is being animated.

    The leave animation starts with the center shape as a tiny «x» that grows in size until the element is wiped from view. The enter animation the center shape is a «+» that is already larger than the element and shrinks down to nothing.

    Drops

    The drops transition takes advantage of the ability to have multiple shapes in the same path. The path has ten circles placed strategically inside the area of the element. They start out as tiny and unseen, then are animated to a larger size over time. There are ten keyframes in the animation and each keyframe resizes a circle while maintaining the state of any previously resized circle. This gives the appearance of circles popping in or out of view one after the other during the animation.

    The leave transition has the circles being shrunken out of view one at a time and the negative space grows to wipe out the element. The enter transition plays the animation in reverse so that the circles enlarge and the positive space grows to reveal the new element.

    The CSS used for the drops transition is rather large, so take a look at the CSS section of the CodePen demo starting with the .drops-enter-active selector.

    Numbers

    This transition is similar to the x-plus transition above — it uses a negative shape for the animation inside a larger positive shape. In this demo, the animated shape changes through the numbers 1, 2, and 3 until the element is wiped away or revealed. The numeric shapes were created by manipulating the vertices of each number into the shape of the next number. So, each number shape has the same number of vertices and curves that animate correctly from one to the next.

    The leave transition starts with the shape in the center but is made to be unseen. It then animates into the shape of the first number. The next keyframe animates to the next number and so no, then plays in reverse.

    The CSS used for this is ginormous just like the last one, so take a look at the CSS section of the CodePen demo starting with the .numbers-enter-active selector.

    Hopefully this article has given you a good idea of how clip-path can be used to create flexible and powerful animations that can be both straightforward and complex. Animations can add a nice touch to a design and even help provide context when switching from one state to another. At the same time, remember to be mindful of those who may prefer to limit the amount of animation or movement, for example, by setting reduced motion preferences.

    Топ-пост этого месяца:  Возможности обновленной версии мобильных приложений Telegram
    Добавить комментарий