Только для экранов
1200+
1200+
Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
Примеры с фото и отредактированным фото с белым слоем работают только при ширине экрана 1200+.
1) Добавляем SHAPE элемент для фона и ставим в него изображение. Так-же в настройках элемента SHAPE выставляем настройку Behavior: Fixed. (это изображение для фона, растяните на window 100%)
2) Добавляем shape элемент для которого будет применен blur.
Есть три варианта, каждый выглядит немного иначе.
Вариант 1. Шейп
Шейпу для blur эффекта задаем цвет заднего фона.
Вариант 2. Фото:
Шейпу для blur эффекта указываем изображение, которое находится на заднем фоне и ставим Behavior: Fixed.
Вариант 3. Фото с белым слоем сверху:
Само изображение нужно обработать в графическом редакторе, наложив на него сверху полупрозрачный слой с белым цветом. Шейпу с blur указываем обработанное изображение и ставим Behavior: Fixed.
4) Узнаем Class элемента и указываем его в коде. Так-же, можно изменить размер blur изменив 5px на другое значение.
1) Добавляем SHAPE элемент для фона и ставим в него изображение. Так-же в настройках элемента SHAPE выставляем настройку Behavior: Fixed. (это изображение для фона, растяните на window 100%)
2) Добавляем shape элемент для которого будет применен blur.
Есть три варианта, каждый выглядит немного иначе.
Вариант 1. Шейп
Шейпу для blur эффекта задаем цвет заднего фона.
Вариант 2. Фото:
Шейпу для blur эффекта указываем изображение, которое находится на заднем фоне и ставим Behavior: Fixed.
Вариант 3. Фото с белым слоем сверху:
Само изображение нужно обработать в графическом редакторе, наложив на него сверху полупрозрачный слой с белым цветом. Шейпу с blur указываем обработанное изображение и ставим Behavior: Fixed.
4) Узнаем Class элемента и указываем его в коде. Так-же, можно изменить размер blur изменив 5px на другое значение.
Эффект размытия на фотографиях
Код
<!-- Тильдошная блюр эффект -->
<style>
.tn-elem__915959641551873141635 .tn-atom {
filter: blur(5px);
}
</style>Есть вопросы?
Вот что есть еще
