В этом видео я расскажу, как можно создать более интересный радиус скругления углов, используя CSS Houdini.
Описание
Видеоинструкция по подключению
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
В настоящее время не все браузеры поддерживают эту технологию. Ниже представлена подробная таблица с информацией о поддержке браузерами:
Важно!
Ниже представлены два примера с Houdini и обычным скруглением
Разница в бордере
В Zero-блоке создаём шейп и вешаем ему класс squircle-houdini
1 шаг
<!--Houdini border
https://mt-webdesign.ru/houdini-border-->
<script type="text/javascript">
(async function () {
if (!("paintWorklet" in CSS)) {
await import("https://unpkg.com/css-paint-polyfill");
}
await CSS.paintWorklet.addModule(
"https://www.unpkg.com/css-houdini-squircle/squircle.min.js"
);
document.body.classList.add("houdini-ready");
})();
</script>
<style>
/*Настройки углов*/
:root {
--BorderHoudini: 40px; /*Браузер поддерживает*/
--BorderOther: 40px; /*Браузер не поддерживает*/
--BorderHoudiniMob: 40px; /*Браузер поддерживает мобила*/
--BorderOtherMob: 40px; /*Браузер не поддерживает мобила*/
}
/*для экранов более 480px */
@media screen and (min-width:481px) {
.squircle-houdini {
border-radius: var(--BorderOther); /* если нет поддержки браузера*/
--squircle-radius: var(--BorderHoudini); /* если есть поддержка браузера*/
--squircle-smoothness: 1;
mask-image: paint(squircle);
-webkit-mask-image: paint(squircle);
}
}
/*для экранов до 480px */
@media screen and (max-width:480px) {
.squircle-houdini {
border-radius: var(--BorderOtherMob); /* если нет поддержки браузера*/
--squircle-radius: var(--BorderHoudiniMob); /* если есть поддержка браузера*/
--squircle-smoothness: 1;
mask-image: paint(squircle);
-webkit-mask-image: paint(squircle);
}
}
body.houdini-ready .squircle-houdini {
mask-image: paint(squircle);
-webkit-mask-image: paint(squircle);
}
</style>
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
