URL скопирован в буфер обмена!

Как сделать градиентную обводку для элементов в Zero Block на Tilda?

С помощью этой модификации можно добавить градиентную обводку кнопок, шейпов и изображений в Zero Block. Можно настроить цвет и угол наклона градиента и дополнительно включить анимацию для обводки.

Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode

Генератор кода

Класс элемента
Толщина обводки
Цвет градиента
Угол наклона градиента
Радиус углов
Анимация
Скорость анимации
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD103--><style> .ti-gradient{ position: absolute; top: 0; left: 0; } .ti-gradient::after{ content:''; position: absolute; left: -5px; top: -5px; bottom: -5px; right: -5px; z-index: -1; border-radius: 10px; background-image: linear-gradient(45deg,#F7D5CE, #F96855); background-size: 200%; animation: tildatcdborder 3s ease infinite paused; } .ti-gradient:hover::after{ } </style>
КОПИРОВАТЬ КОД
1. Создаем в Zero Block кнопку, картинку или шейп и присваиваем класс ti-gradient
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс

2. Указываем в генераторе настройки градиента:
Толщина обводки - указываем толщину обводки в пикселях;
Цвет градиента - через запятую указываем цвет градиента (минимум два цвета);
Угол наклона градиента - указываем угол наклона градиента;
Радиус углов - указываем радиус скругления углов обводки. Учитывайте что обводка будет внешняя и скругление нужно указывать пропорционально к скруглению углов самого элемента. Например, если у вас шейп с радиусом углов 10px и толщина ободки 2px, то в генераторе радиус углов указываем 12px;
Анимация - если включено, то добавляет легкую, зацикленную css анимацию для обводки. Дополнительно можно настроить время анимации.

3. Копируем код и вставляем в HTML блок T123.
КНОПКА
Made on
Tilda