Немного скриптов вам в помощь
В данном разделе будут размещены различные простенькие скрипты, которые могут помочь вам с решением нестандартных задач.
К каждому скрипту будет приложена инструкция с указанием как и какие параметры необходимо изменить, чтобы получить нужный результат.
К каждому скрипту будет приложена инструкция с указанием как и какие параметры необходимо изменить, чтобы получить нужный результат.
- Жмем правой кнопкой мыши по нужному элементу как указано на картинке выше;
- В открывшемся списке выбираем пункт "Add CSS Class Name";
- Автоматически в меню справа появляется дополнительное поле для ввода с названием "CSS CLASS NAME", если вдруг меню проскролили и потеряли данный пункт, то он расположен прямо под пунктом "POINER EVENTS";
- Вписываем в данное поле необходимое значение
- Жмем на пункт "Настройки" в верхнем левом углу и в открывшемся меню, снизу, ищем наш "block id:"
- Копируем данный id, как правило с решеткой, и вставляем в необходимое поле!
Градиента для кнопки в Zero Block
Скопируйте данный код, выставьте необходимые значения и пользуйтесь готовым результатом
<style>.gradient .tn-atom {
background: linear-gradient(270deg, #ff5555, #ebdb12);
}
</style>
background: linear-gradient(270deg, #ff5555, #ebdb12);
}
</style>
Скопировать
ПРИМЕР
- Скопируйте данный код;
- Вставьте его в блок Т123;
- Задайте свои значения цвета и угла поворота для получения желаемого результата;
- Не забудьте также указать CSS класс для кнопки
gradient - CSS класс кнопки. Можете задать любое название
270 - угол поворота градиента
#ff5555 - первый цвет градиента
#ebdb12 - второй цвет градиента
270 - угол поворота градиента
#ff5555 - первый цвет градиента
#ebdb12 - второй цвет градиента
Эффект размытия в Zero Block
Скопируйте данный код, выставьте необходимые значения и пользуйтесь готовым результатом
<style>
.blur {
backdrop-filter: blur(7px);
border-radius: 20px;
}
</style>
.blur {
backdrop-filter: blur(7px);
border-radius: 20px;
}
</style>
Скопировать
ПРИМЕР
- Скопируйте данный код;
- Вставьте его в блок Т123;
- Задайте свои значения степени размытия фона и угла скругления плашки для получения желаемого результата;
- Не забудьте также указать CSS класс для кнопки
blur - CSS класс элемента. Можете задать любое название
blur(7px) - степень размытия
20px - радиус скругления
blur(7px) - степень размытия
20px - радиус скругления
Фиксированное меню при скролле сделанное в Zero Block
Скопируйте данный код, выставьте необходимые значения и пользуйтесь готовым результатом
<style>
#rec220234333 .t396__artboard{
position: fixed;
z-index: 100500;
}
</style>
#rec220234333 .t396__artboard{
position: fixed;
z-index: 100500;
}
</style>
Скопировать
FIXMENU
- Скопируйте данный код;
- Вставьте его в блок Т123;
- Задайте свои значения для получения желаемого результата
#rec220234333 - id зеро блока в котором сделано ваше меню
Градиент для любого стандартного блока
Скопируйте данный код, выставьте необходимые значения и пользуйтесь готовым результатом
<style>
#rec373000898{
background:linear-gradient(90deg,#3f5efb 0%,#fc466b 100%);
background-blend-mode:screen
}
</style>
#rec373000898{
background:linear-gradient(90deg,#3f5efb 0%,#fc466b 100%);
background-blend-mode:screen
}
</style>
Скопировать
- Скопируйте данный код;
- Вставьте его в блок Т123;
- Задайте свои значения для получения желаемого результата;
- Не забудьте указать ID блока в котором будет применен данный эффект;
- Убедитесь что в настройках блока отключён фоновый цвет
#rec373000898 - id блока в котором необходимо применить данный эффект
90deg - угол поворота градиента
#3f5efb - первый цвет градиента
#fc466b - второй цвет градиента
0% и 100% - начальные точки расположения "чистых" цветов градиента.
В данном случае 0% - крайняя левая точка монитора и градиент идет вправо, 100% - крайняя правая точка монитора и градиент идет влево!
(в данном коде можно указывать бесконечное множество цветов, но не стоит забывать, что всегда нужно указывать точку расположения 0%, 10%, 30% и так далее... в зависимости от того, где какой цвет начинается)
90deg - угол поворота градиента
#3f5efb - первый цвет градиента
#fc466b - второй цвет градиента
0% и 100% - начальные точки расположения "чистых" цветов градиента.
В данном случае 0% - крайняя левая точка монитора и градиент идет вправо, 100% - крайняя правая точка монитора и градиент идет влево!
(в данном коде можно указывать бесконечное множество цветов, но не стоит забывать, что всегда нужно указывать точку расположения 0%, 10%, 30% и так далее... в зависимости от того, где какой цвет начинается)