Loading...

Как кастомизировать элемент shape в Zero Block TILDA?

С помощью нашей модификации ты можешь настроить у шейпа: скругление конкретных углов, размытие заднего фона, градиент, внутреннюю тень
Время настройки: 3 минуты
Генератор кода
Видео инструкция
Инструкция
1. Добавляем шейп в Зеро Блок и указываем класс к нему такой же как и в генераторе;

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываешь тот же класс что и в генераторе;

2. Настраиваем размытие шейпа.

3. Настраиваем размер скругления нужных углов;

4. Настраиваем размытие фона. Здесь нужно обязательно указать цвет и прозрачность. Цвет и прозрачности внутри настроек зеро блока не будут учитываться.

4. Настраиваем внутреннюю тень;

5. Настраиваем градиент;

6. Копируем сгенерированный HTML код и вставляем его в CSS-СТИЛИ;

CSS-СТИЛИ находятся в Настройки сайта-Ещё-CSS-СТИЛИ

Конечный шейп со всеми настройками будет отображаться в редакторе и на опубликованной странице, внутри Зеро Блока увидеть получившиеся настройки нельзя((

upd. ВАЖНО. Мы исправили настройку для "Размытие - backdrop-filter". Теперь, чтобы добавить размытие фона, нужно выбрать "+ Добавить фон с цветом и прозрачностью", настроить значение размытия. И обязательно(!) указать цвет и прозрачность.
Текст за шейпом
25% прозрачности
Текст за шейпом
50%
прозрачности
Класс элемента
Размытие элемента - Blur (px)
Скругление - border-radius (px)
top left (px)
top right (px)
bottom left (px)
bottom right (px)
Размытие - backdrop-filter (px)
Цвет шейпа
Opacity
Положение X (px)
Положение Y (px)
blur (px)
spread (px)
Цвет (hex)
Opacity
Угол наклона градиента
Цвет 1
Цвет 2
Копировать код<!-- Как кастомизировать элемент shape в Zero Block TILDA? -->
<!-- https://nolim.cc/kastomiziruyem-sheyp -->
<style> .ssh .tn-atom { border-radius: 100px 70px 50px 30px;  background: linear-gradient(45deg, #e9474a -10%, #1e4be2 110%); background: -webkit-linear-gradient(45deg, #e9474a -10%, #1e4be2 110%);   -webkit-box-shadow: inset 0px 0px 10px 16px #000; -moz-box-shadow: inset 0px 0px 10px 16px #000; box-shadow: inset 0px 0px 10px 16px #000; } .ssh {} .myshape > .tn-atom__sbs-anim-wrapper > .tn-atom, .myshape > .tn-atom__sbs-anim-wrapper {backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px); filter: blur(20px); -webkit-filter: blur(20px); border-radius: 100px 70px 50px 30px; }.myshape > .tn-atom {backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px); filter: blur(20px); -webkit-filter: blur(20px); border-radius: 100px 70px 50px 30px; opacity: unset!important;background-color: #00000050!important;}</style>
Код доступен только тем, кто оплатил подписку
Подписка стоит 390р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda