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
В этом коротком видео вы узнаете как работать с базовой формой 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