Эффект размытия фона в zero block
Модификация сделана в 2 вариантах: можно размыть фон zero block, либо размыть фон шейпа, изображения, галереи, видео, кнопки и тултипа в zero block.
Как размыть фон zero block
- Убери цвет фона в настройках zero block.
- Укажи в настройках ниже id блока, цвет с прозрачностью, насыщенность и величину размытия фона под свой дизайн. Фону обязательно сделай прозрачность меньше 1, то есть меньше 100%.
- Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.
<!-- https://romanyu.ru/effekt-razmytiya-fona -->
<style>
/* Укажи id блока, к которому нужно применить эффект размытия */
#rec228501390 {
/* Укажи цвет фона и прозрачность */
background-color: rgba(0, 0, 0, 0.2) !important;
/* Укажи насыщенность фона (saturate) и величину размытия (blur) */
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
</style>Как размыть фон элемента в zero block
Размыть фон в zero block можно у шейпа, изображения, галереи, видео, кнопки и тултипа.
- Задай в настройках Тильды цвет фона и прозрачность меньше 100% элементу в zero block, к которому будешь применять эффект размытия.
- Пропиши данному элементу название класса: tn-elem-blur. Инструкция по добавлению своего класса элементу.
- Укажи здесь в настройках насыщенность и величину размытия фона под свой дизайн.
- Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.
Понравилось решение?
Закинь денежку в благодарность за крутые и полезные модификации для Тильды!
Код успешно скопирован!