База знаний no-code платформы Taptop

Как сделать размытие заднего фона для блока: Backdrop filter

В дизайне часто используется эффект размытия заднего фона у блока. Например, можно сделать прозрачные карточки с размытым фоном позади них. В Taptop это делается очень просто с помощью свойства Фоновые фильтры (Backdrop filter).

Пример размытия заднего фона у карточек

Пример размытия заднего фона у карточек

Смотрите видео:

  • Kinescope
  • VK Video
  • RuTube
  • YouTube
  • Vimeo

Как добавить Backdrop filter

Создайте секцию с фоновым изображением.

Секция с фоновым изображением

Секция с фоновым изображением

Добавьте карточки с прозрачным фоном и обводкой с помощью виджета Block List.

Карточки с прозрачным фоном и обводкой

Карточки с прозрачным фоном и обводкой

Выберите любую карточку — айтем в блок-листе. В правой панели найдите свойство Фоновые фильтры (Backdrop filters) и нажмите +, чтобы добавить фильтр.

Добавляем фоновый фильтр карточке

Добавляем фоновый фильтр карточке

Выберите эффект Размытие (Blur) и настройте нужное значение.

Делаем значение радиуса размытия побольше

Делаем значение радиуса размытия побольше

5. Для эффектности можно дополнительно добавить цвет фона с прозрачностью.

Дополнительный полупрозрачный цвет фона у карточки

Дополнительный полупрозрачный цвет фона у карточки

Готово! Мы сделали эффект размытия заднего фона у карточек.
BlockNote image

Резюме

Эффект размытия заднего фона — свойство Фоновые фильтры (Backdrop filter) Размытие (Blur).

Похожие статьи

Как сделать блюр для фона с меню на мобильных версиях
Как сделать эффект размытия или затемнения фона при наведении на карточку
Как сделать параллакс фонового изображения
Как добавить оверлей для изображения, как в Figma?
Виджет Image и фоновое изображение: в чем разница?