Смотрите обучающее видео на YouTube канале
Суперэлипс в стандартных и zero-блоках
Photo by Jacob
Photo by Kolya
Photo by Oliver
Photo by Leo
Photo by Paul
Photo by Lea
Photo by Fabrice
Photo by Alex
Photo by Adam
Photo by Arnaud
Photo by Leopold
Photo by Katie
Photo by Tiana
Photo by Mohd
Инструкция

  1. Добавляем в zero-блоке шейпы, изображения или кнопки, к которым у нас будет применяться скругление. В редакторе скругление этих элементов можно оставить со значением 0
  2. Задаем классы этим элементам (щелчок правой кнопкой мыши по элементу — Add CSS Class Name), в моём примере это класс squircle24, так как скругление углов равно 24px.
  3. Копируем код в блоке ниже и ориентируемся по комментариям внутри него: !!! Если у вас многостраничник, и вы будете использовать скругление на разных страницах. то лучше код, который помечен как для вставки в head, поместить в Настройки сайта — Еще — HTML код для вставки внутрь Head. Либо в header сайта, если он общий на все страницы. !!! Если у сайта одна страница, то код можно использовать на текущей странице целиком
  4. Можно использовать для отдельных элементов свой радиус скругления, для этого просто скопируйте все нужные строчки между тэгами <style></style>, вставьте ниже и пропишите новое название класса и также нужный радиус скругления.
  5. Использование кода суперэлипса для стандартных блоков ничем не отличается от кода с обычным скругление блоков, вы также берете класс из таблицы на этой странице и прописываете вместо того кода всё, что в пункте 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-->


Made on
Tilda