54. backdrop-filter

CSS: Стиль. Урок: backdrop-filter

Иллюстрация к уроку backdrop-filter – это мощное CSS-свойство, позволяющее применять графические эффекты к области под элементом. Это открывает двери для создания интересных визуальных эффектов, таких как размытие, затемнение или изменение цвета фона, видимого сквозь полупрозрачный элемент.

Концепция `backdrop-filter`

Представьте себе лист стекла, расположенный перед фотографией. backdrop-filter позволяет вам применять фильтры (например, размытие) к фотографии, видимой через стекло. Главное отличие от обычного filter в том, что filter применяется к самому элементу, а backdrop-filter – к области под ним.

Синтаксис:

backdrop-filter: <filter-function> [<filter-function> ...] | none

Здесь <filter-function> – это одна или несколько CSS-функций фильтра, таких как blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(). Значение none отключает фильтр.

Практические примеры кода

Пример 1: Размытие фона

<div class="container">
  <div class="popup">Содержимое всплывающего окна</div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background-image: url('image.jpg'); /* Замените на URL вашей картинки */
  background-size: cover;
}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.5); /* Полупрозрачный белый фон */
  backdrop-filter: blur(10px); /* Размываем фон под элементом */
  border-radius: 5px;
}

В этом примере мы создаем полупрозрачное всплывающее окно (.popup), которое размывает фоновое изображение (.container) под ним.

Пример 2: Несколько фильтров

.popup {
  backdrop-filter: blur(5px) brightness(1.2); /* Размытие и увеличение яркости */
}

Здесь мы применяем сразу два фильтра: размытие и увеличение яркости.

Пример 3: Отключение фильтра

.popup {
  backdrop-filter: none; /* Отключаем фильтр */
}

Жизненный пример

backdrop-filter часто используется в современных веб-интерфейсах для создания эффектов размытия или затемнения фона за модальными окнами, навигационными панелями или другими элементами интерфейса.

Операционные системы: Многие операционные системы (macOS, Windows) используют подобные эффекты для меню и окон.
Веб-сайты: Сайты, использующие параллакс-эффект, могут использовать backdrop-filter для размытия фона под фиксированными элементами навигации.
Приложения: Мобильные приложения также часто применяют этот эффект для улучшения читаемости текста на фоне изображений.
UI-фреймворки: Некоторые UI-фреймворки и библиотеки компонентов предоставляют готовые компоненты с использованием backdrop-filter.

Ключевые моменты

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