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

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

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

Инструкция

Скопировать

<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>

Данный код взят с сайта: dsgnmax.ru

Перейти

Более подробно об установке кода вы можете ознакомиться на странице автора