Суперэлипс в Тильде

Главная
/
Модификации
/
Суперэлипс в стандартных и zero-блоках

Смотрите обучающее видео на YouTube канале

Суперэлипс в стандартных и zero-блоках

Данная модификация может некорректно работать, иногда могут пропадать блоки, к котором применененны свойства суперэлипса

Кнопка

Инструкция

Добавляем в 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-->