Как сделать градиент в tilda
В линейном градиенте переход между цветами происходит по прямой линии. Можно использовать несколько цветов, изменить расстояние между ними внутри градиента и задать любой угол направления для цветового сочетания.
Чтобы добавить линейный градиент на элемент, перейдите в Настройки Zero Block → Background Color → Linear. Чтобы добавить ещё один цвет, выберите его на панели. Чтобы удалить цвет, зажмите его и потяните вниз. Под палитрой можно задать угол, под которым будет отображаться градиент — введите число или покрутите виджет мышкой.
Радиальный градиент (Radial)
Переход между цветами в радиальном градиенте происходит из центра наружу по кругу. В настройках блока можно задать любое количество цветов и расстояние между ними внутри градиента.
Чтобы добавить радиальный градиент на элемент, перейдите в Настройки Zero Block → Background Color → Radial.
Добавляйте градиенты в дизайн вашего проекта без использования дополнительных инструментов, прямо внутри редактора Zero Block.
Анимация текста в Тильда — переливающийся градиент
Шаг 1: Создать Zero Block, добавить текст, поменять фон:
Шаг 2: Добавить HTML-блок, вставить CSS код и задать тексту класс flowtext :
Эффект при наведении на элемент в Zero-блоке
Мы привыкли, что при наведении на ссылку появляется подчёркивание. А в Zero-блоке даже этого нет, если выставить текстовому элементу ссылку в настройках. А что, если подчеркивание не просто будет появляться, но и станет цветным или градиентным, а также анимированным — появление подчёркивания начнётся в том месте, в котором вы навели мышкой на элемент?
Хм. А если подумать, то можно не только подчёркивание сделать, но и заливку всего элемента. Сложно представить… проще показать! Поэтому листайте в самый низ страницы и попробуйте навести на каждый элемент.
- Задайте элементу Zero-блока класс и впишите этот класс в настройки ниже.
- Выберите остальные опции.
- Скопируйте код и вставьте его в блок T123 под Zero-блоком.
style> .my-class < text-decoration: none; transition: opacity 300ms cubic-bezier(0.51, 0.92, 0.24, 1); > .my-class::after < --scale: 0; content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 3px; border-radius: 5px; background: linear-gradient(135deg, #ffcc00, #ca1a2b); transform: scaleX(var(--scale)); transform-origin: var(--x) 50%; transition: transform 300ms cubic-bezier(0.51, 0.92, 0.24, 1); > .my-class:hover < opacity: 1; > .my-class:hover::after < --scale: 1; > style> script> document.querySelectorAll('.my-class').forEach((elem) => < elem.onmouseenter = elem.onmouseleave = (e) =>< const tolerance = 10; const left = 0; const right = elem.clientWidth; let x = e.pageX - elem.offsetLeft; if (x - tolerance < left) x = left; if (x + tolerance > right) x = right; elem.style.setProperty('--x', `$ px`); > >); script>
Результат применения эффекта
Наведи на любой из элементов, чтобы увидеть модификацию в действии.
Заполнение фона
Много текста, но не смотря на это тут будет только подчеркивание всего элемента, чтобы вы могли увидеть разницу
Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
Big thanks to Adobe Illustrator, which allowed us to draw and perfect these beauties. These guys are real members of our team, by the way.
1) В Zero блок добавляем shape с container: window, height 100%, width: 100% и вставляем в него нужное нам изображение. Так же, можно сразу поставить прозрачность 20-30%.
2) Добавляем код в блок Т123. Код 1 для эффекта на 1 экран, код 2 для эффекта на всю страницу.
В коде нужно дважды указать class нашего shape элемента.
Дальше в редакторе Zero блока настройте прозрачность шейпа, как вам нужно.
Чтобы изменить размер паттерна нужно в коде изменить (например, сделать точки меньше и плотнее), нужно в строке «background-size: auto !important;» заменить auto на 50px. Так ваш паттерн будет повторяться каждые 50 пикселей. Можно поставить любое нужное вам значение.
Можно применить как к отдельному экрану, так и ко всему сайту поверх всех элементов сайта. Как изображение используется gif с шумом, но его можно вполне заменить на любое другое изображение или gif с паттерном, к примеру как точки на заднем фоне в примере выше. Так-же, можно добавить несколько изображений.