Данная модификация может некорректно работать, иногда могут пропадать блоки, к котором применененны свойства суперэлипса
Инструкция
- Добавляем в zero-блоке шейпы, изображения или кнопки, к которым у нас будет применяться скругление. В редакторе скругление этих элементов можно оставить со значением 0
- Задаем классы этим элементам (щелчок правой кнопкой мыши по элементу — Add CSS Class Name), в моём примере это класс squircle24, так как скругление углов равно 24px.
- Копируем код в блоке ниже и ориентируемся по комментариям внутри него: !!! Если у вас многостраничник, и вы будете использовать скругление на разных страницах. то лучше код, который помечен как для вставки в head, поместить в Настройки сайта — Еще — HTML код для вставки внутрь Head. Либо в header сайта, если он общий на все страницы. !!! Если у сайта одна страница, то код можно использовать на текущей странице целиком
- Можно использовать для отдельных элементов свой радиус скругления, для этого просто скопируйте все нужные строчки между тэгами <style> … </style>, вставьте ниже и пропишите новое название класса и также нужный радиус скругления.
- Использование кода суперэлипса для стандартных блоков ничем не отличается от кода с обычным скругление блоков, вы также берете класс из таблицы на этой странице и прописываете вместо того кода всё, что в пункте 4 между тегами style.
Здесь вы можете скопировать готовый код и также почитать подробные комментарии к нему
<!--https://dsgnmax.ru/squircle-->
<script src="https://unpkg.com/css-paint-polyfill@3.4.0/dist/css-paint-polyfill.js"></script>
<script>
(async function () {
if (!("paintWorklet" in CSS)) {
await import("css-paint-polyfill");
}
CSS.paintWorklet.addModule(
`https://www.unpkg.com/css-houdini-squircle/squircle.min.js`
);
})();
</script>
<style>
/*Элемент без анимации, либо со стандартной анимацией*/
.squircle24{ /*Название класса*/
--squircle-radius: 24px; /*Радиус скругления углов*/
--squircle-smooth: 1; /*Плавность скруглений, где 0 - это скошеные углы*/
mask-image: paint(squircle);
-webkit-mask-image: paint(squircle);
}
/*Элемент с SBS-анимацией*/
.squirclesbs24 div{ /*Название класса*/
--squircle-radius: 24px; /*Радиус скругления углов*/
--squircle-smooth: 1; /*Плавность скруглений, где 0 - это скошеные углы*/
mask-image: paint(squircle);
-webkit-mask-image: paint(squircle);
}
/*Скругление полей ввода в форме зеро-блока*/
.squircleform24 .t-input-block{
--squircle-radius: 24px;
--squircle-smooth: 1;
mask-image: paint(squircle);
-webkit-mask-image: paint(squircle);
}
/*Скругление кнопки форме зеро-блока*/
.squircleform24 .tn-form__submit button{
--squircle-radius: 24px;
--squircle-smooth: 1;
mask-image: paint(squircle);
-webkit-mask-image: paint(squircle);
}
</style>
<!--https://dsgnmax.ru/squircle-->
