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.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Указываем в генераторе настройки градиента:
Толщина обводки - указываем толщину обводки в пикселях;
Цвет градиента - через запятую указываем цвет градиента (минимум два цвета);
Угол наклона градиента - указываем угол наклона градиента;
Радиус углов - указываем радиус скругления углов обводки. Учитывайте что обводка будет внешняя и скругление нужно указывать пропорционально к скруглению углов самого элемента. Например, если у вас шейп с радиусом углов 10px и толщина ободки 2px, то в генераторе радиус углов указываем 12px;
Анимация - если включено, то добавляет легкую, зацикленную css анимацию для обводки. Дополнительно можно настроить время анимации.
3. Копируем код и вставляем в HTML блок T123.
КНОПКА
