clip-path path() — Все достоинства и недостатки, которые вы обязательно должны знать

В этом коротком видео вы узнаете как работать с базовой формой path() css-свойства clip-path. Кроме того, я детально расскажу о ее недостатках и как их преодолеть.

Единственный параметр, который передается функции path() — это строка, которая определяет путь в SVG файле. Именно он является обтравочным контуром, с помощью которого мы будем показывать только ту область или часть картинки, которую необходимо.

Новички справшивают где взять этот путь или как его нарисовать.

В любом ВЕКТОРНОМ графическом редакторе, который может сохранять файлы в SVG формате можно создать такой путь с помощью имеющихся в нем инструментов, например, ПЕРА или РУЧКИ. Такие инструменты могут называться по разному, но суть у них одна - они рисуют плавные кривые линии. Или можно, например, создать такой контур из комбинации нескольких окружностей.

Я это обычно делаю в векторном графическом редакторе Adobe Illustrator.

Затем сохраняю этот файл в формате SVG. В процессе сохранения в диалоговом окне SVG Options кликаю на кнопку SVG Code.
Открывается файл со сгенерированным кодом и в нем я нахожу и выделяю нужный мне путь. Он записан в атрибуте d тега path.
Выделяю то, что находится в кавычках и копирую в буфер.
Затем в редакторе кода вставляю скопированное в CSS файл, а именно в свойство clip-path.

Конвертация абсолютного пути в относительный:
https://yoksel.github.io/relative-clip-path/

==========================================
🏆 ПРЕДЛАГАЮ УСЛУГИ :::
✅ профессиональная адаптивная кроссбраузерная верстка веб-сайтов (HTML5, CSS3, Flexbox, Grid, Vue 3, Vite)
✅ анимирование элементов на страницах веб-сайта (GSAP, Adobe Animate)
✅ фронтенд программирование на Javascript
✅ посадка верстки на CMS WordPress

==========================================
⚽ ИНДИВИДУАЛЬНО ОБУЧАЮ ОНЛАЙН :::
✅ работе с JS-библиотекой GSAP (веб-анимация)
✅ работе в программе Adobe Animate

Связаться со мной можно по email, который указан на Главной странице этого канала. Перейти можно по ссылке ниже:
https://www.youtube.com/channel/@inteltone

💌 СОЦИАЛЬНЫЕ СЕТИ :::
https://vk.com/pro_front_end

#clippath #css

Видео clip-path path() — Все достоинства и недостатки, которые вы обязательно должны знать канала ПРО ФРОНТЕНД