Как в Тильде сделать Squircle (Superellipse) скругление в ZeroBlock

Вы сможете добавить скругление, как на iOS, так называемый Squircle или Superellipse, к шейпу, изображению или кнопке в ZeroBlock

Пример

Example squircle
Book design is the art of incorporating the content
Example
Example squircle
Book design is the art of incorporating the content
Example
Example squircle
Book design is the art of incorporating the content
Example

Инструкция


  1. Копируете скрипт в T123;
  2. Заполняете настройки*;
  3. Устанавливаете внизу страницы, если используете на всем сайте, то устанавливайте в подвал;
  4. Создаете ZeroBlock;
  5. Добавляете элементы;
  6. Присваиваете классы: «randon-corners» — для элемента с разными углами (в примере шейп с фото); «large-corners» — для элемента с одинаковыми углами большого радиуса (в примере шейп); «small-corners» — для элемента с одинаковыми углами меньшего радиуса (в примере кнопка);
  7. Заполняем настройки;
  8. Если необходимо добавляем настройки для адаптивов;
  9. Публикуйте страницу.

*Настройки помечены комментариями в коде.

Код примера

<!--
 * Name: Squircle (Superellipse) скругление в ZeroBlock
 * Description: Скрипт добавляет скругление, как на iOS, так называемый Squircle или Superellipse, к шейпу, изображению или кнопке в ZeroBlock
 * Author: ANKU
 * URL: https://anku.one/squircle
-->
<style>
    :root {
         /* Разные значени скругления */
        --random-t-l: 24; /* Разные углы: Скругление угла - верх-лево */
        --random-t-r: 24; /* Разные углы: Скругление угла - верх-право */
        --random-b-l: 0; /* Разные углы: Скругление угла - низ-право */
        --random-b-r: 0; /* Разные углы: Скругление угла - низ-право */
        --random-smooth: 0.8; /* Разные углы: Сглаживание углов, значение от 0.1 до 1 */
         /* Равные значени скругления - для шейпа */
        --large-all: 24; /* Для шейпа: Скругление углов */
        --large-smooth: 0.8; /* Для шейпа: Сглаживание углов, значение от 0.1 до 1 */
        /* Равные значени скругления - для кнопки */
        --small-all: 12; /* Для кнопки: Скругление углов */
        --small-smooth: 0.8; /* Для кнопки: Сглаживание углов, значение от 0.1 до 1 */
    }
    /* Тут добавляем адаптивы, стандартные значения для Тильды: 1200px / 960px / 640px / 480px */
    @media screen and (max-width: 960px) {
        /* Пример адаптива */
        :root {
             /* Разные значени скругления */
            --random-t-l: 24; /* Разные углы: Скругление угла - верх-лево */
            --random-t-r: 24; /* Разные углы: Скругление угла - верх-право */
            --random-b-l: 0; /* Разные углы: Скругление угла - низ-право */
            --random-b-r: 0; /* Разные углы: Скругление угла - низ-право */
            --random-smooth: 0.8; /* Разные углы: Сглаживание углов, значение от 0.1 до 1 */
             /* Равные значени скругления - для шейпа */
            --large-all: 24; /* Для шейпа: Скругление углов */
            --large-smooth: 0.8; /* Для шейпа: Сглаживание углов, значение от 0.1 до 1 */
            /* Равные значени скругления - для кнопки */
            --small-all: 12; /* Для кнопки: Скругление углов */
            --small-smooth: 0.8; /* Для кнопки: Сглаживание углов, значение от 0.1 до 1 */
        }
    }
    
    /* Не менять код ниже этого комментария */
    .randon-corners{--squircle-smooth:var(--random-smooth);--squircle-radius-top-left:var(--random-t-l);--squircle-radius-top-right:var(--random-t-r);--squircle-radius-bottom-right:var(--random-b-l);--squircle-radius-bottom-left:var(--random-b-l)}.large-corners{--squircle-smooth:var(--large-smooth);--squircle-radius:var(--large-all)}.small-corners{--squircle-smooth:var(--small-smooth);--squircle-radius:var(--small-all)}.large-corners,.randon-corners,.small-corners{-webkit-mask-image:paint(squircle);mask-image:paint(squircle)}
</style>
<script src="https://unpkg.com/css-paint-polyfill"></script><script>"paintWorklet"in CSS&&CSS.paintWorklet.addModule("https://www.unpkg.com/css-houdini-squircle/squircle.min.js");</script><script>console.log("Хочешь Superellipse скругления в ZeroBlock для Tilda, смотри эту статью: https://anku.one/squircle")</script>
Копировать код

Дополнение

Данный скрипт работает на экспериментальной технологии, которая не включена в официальную документацию браузеров. К свойству подключен полифил (фрагмент кода, который позволяет использовать современную функциональность в более старых браузерах, которые не поддерживают ее по умолчанию), в браузерах старых версий, а так же непопулярных движках данная функция не работает.

Так же для корректной работы, ваш сайт должен открываться по https.

Если есть вопросы, пишите!
Made on
Tilda