Реализация эффекта размытия для div в CSS: кросс-браузерное решение

Быстрый ответ

Чтобы сымитировать эффект стекла, примените свойство backdrop-filter: blur() и определите полупрозрачный фон для оверлея. Вот пример быстрой реализации:

/* Простой эффект "стекла" */
.glass-effect {
  backdrop-filter: blur(10px); /* Добавление эффекта размытия */
  background: rgba(255, 255, 255, 0.5); /* Установка полупрозрачного фона */
}

Присвойте этот CSS-класс элементу, чтобы оверлей отображался поверх контента.

Кроссбраузерная совместимость

Перед тем как продолжить, убедимся, что свойство backdrop-filter поддерживается все целевыми браузерами. К сожалению, Firefox и IE могут иметь проблемы с этим свойством. Проверьте актуальную информацию о поддержке на caniuse.com.

Для пользователей других браузеров можно применить SVG-фильтр. Это может показаться сложным, но результат стоит потраченных усилий. Вот пример применения SVG-фильтра:

/* "Старошкольный" метод создания эффекта "стекла" */
<svg>
  <filter id="blur-effect" x="0" y="0" width="100%" height="100%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>
</svg>

А реализация в CSS будет выглядеть так:

/* Теперь охват поддержки браузерами расширяется! */
.glass-effect {
  filter: url(#blur-effect);
  background: rgba(255, 255, 255, 0.5); /* Здесь тоже присутствует полупрозрачность */
}

Оптимизация и лучшие практики

Подготовка изображений

Для улучшения совместимости имеет смысл использовать предварительно размытые изображения и автоматизировать их создание или произвести редактирование вручную в любимом графическом редакторе.

Подробнее об этом расскажет наш спикер на видео

Добавление объема с использованием тени

Применение box-shadow к оверлею создает дополнительную глубину и вносит ощущение объема.

/* Объемность делает эффект более завершенным */
.glass-effect {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Оверлей на весь экран

Размытый оверлей, покрывающий весь экран, выглядит как плащ супергероя:

/* Наш оверлей адаптирован под любой размер экрана */
.glass-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Сложные ситуации

Балансировка между эффектами

Комбинирование нескольких эффектов размытия требует аккуратного подхода и учета производительности — браузер не должен замедляться.

Простота — залог успеха

Чем простей код, тем легче его поддерживать и отлаживать, что в долгосрочной перспективе сэкономит вам время.

Избегайте размытия текста

Как ни странно, текст не должен выглядеть размытым. Избегайте применения filter: blur() к элементам с текстом, чтобы сохранить его читаемостью.

Визуализация

Возьмите два стекла: одно прозрачное, которое символизирует контент, и одно матовое, играющее роль оверлея. Матовое стекло создает эффект размытия для всего, что находится позади него:

Прозрачное Стекло (🪟): [Контент]
Матовое Стекло (🌫️): [Размытый Оверлей]

Комбинируем их:

🪟 + 🌫️ = Контент с **Эффектом "Стеклянного" Размытия**
# Оверлей (🌫️) придает матовость содержимому, находящемуся за ним (🪟).

Сценарии применения

Модальные окна с акцентом

Модальные окна в состоянии сильно привлечь к себе внимание. Размытие фона помогает снизить акцент на остальных элементах интерфейса.

/* Фокусировка внимания через размытие — это очень символично */
.modal-overlay {
  backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0.4);
}

Утонченное снижение акцента

Создайте акцент на важных элементах интерфейса, слегка затемняя фон.

/* Элементы взаимодействия выходят на первый план */
.menu-active .page-background {
  backdrop-filter: blur(3px);
}

Динамические и визуально насыщенные фоны

Эффект "стекла" добавляет изысканный штрих к дизайну, когда используются динамические и сложные фоновые изображения.

Полезные материалы

1. backface-visibility – CSS: Каскадные таблицы стилей | MDN — руководство по работе с backface-visibility для эффектов 3D-трансформации.
2. Полное руководство по элементу Table | CSS-Tricks — всеобъемлющее руководство по стилизации элемента table.
3. Порядок накладывания фонов | CSS-Tricks — практическое руководство по применению множественных фонов и слоев в CSS.
4. CSS Backdrop Filter | Can I use... Support tables for HTML5, CSS3, etc — справочник по поддержке и совместимости свойства backdrop-filter в CSS.
5. filter – CSS: Каскадные таблицы стилей | MDN — обзор возможностей CSS-фильтров, включая размытие.
6. Размораживание стекла с использованием CSS-фильтров | CSS-Tricks — гайд по созданию эффекта замороженного стекла с использованием CSS-фильтров.
7. blur() – CSS: Каскадные таблицы стилей | MDN — инструкция по созданию эффектов размытия с помощью функции CSS blur().