backdrop-filter для матового стекла
Создавайте эффекты размытия матового стекла на элементах, наложенных на другое содержимое, с помощью backdrop-filter.
«backdrop-filter для матового стекла» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Что такое backdrop-filter?
backdrop-filter применяет графические эффекты к области за элементом, а не к самому элементу. Элемент должен быть частично прозрачным (иметь фон с альфа-каналом меньше 1 или не иметь фона), чтобы через него был виден отфильтрованный фон.
Эффект матового стекла
Классический эффект матового стекла:
<div class="bg-wrapper">
<div class="glass-card">Frosted Glass Card</div>
</div>
Префикс -webkit-backdrop-filter
Safari требует префикс -webkit-backdrop-filter. Для поддержки разных браузеров всегда указывайте его вместе со стандартным свойством.
Доступные функции фильтров
backdrop-filter поддерживает те же функции, что и filter: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia(), drop-shadow().
<div class="bg-wrapper">
<div class="modal-overlay"></div>
</div>
Тёмное матовое стекло
Тёмный вариант для наложений и модальных окон:
<div class="bg-wrapper">
<div class="dark-glass">Dark Frosted Panel</div>
</div>
Требование контекста наложения
backdrop-filter создаёт контекст наложения. Элемент должен композироваться поверх фона — это означает, что он должен находиться выше другого содержимого в порядке наложения (не обязательно благодаря z-index, а благодаря порядку отрисовки).
Производительность backdrop-filter
Интенсивное использование backdrop-filter: blur() требует значительных ресурсов — браузер вынужден отрисовывать фон отдельным проходом. Для мобильных устройств используйте значения размытия не более 20px. Не применяйте этот эффект к содержимому, которое часто перерисовывается.
Модальное окно с матовым наложением
Модальное диалоговое окно с наложением, имитирующим матовое стекло:
<div class="modal-backdrop">
<div class="modal">Modal Content</div>
</div>
Липкая навигация со стеклянным эффектом
Липкая панель навигации с эффектом матового стекла:
<div class="bg-wrapper">
<nav class="navbar">Sticky Nav</nav>
</div>
Поддержка браузерами
backdrop-filter поддерживается в Chrome 76+, Firefox 103+ и Safari 9+ (webkit). Всегда добавляйте префикс -webkit-. Проверьте актуальные данные на caniuse.com и предусмотрите непрозрачный запасной вариант для браузеров без поддержки.
Непрозрачный запасной вариант
Укажите непрозрачный фон как запасной вариант для браузеров, которые не поддерживают backdrop-filter:
<div class="bg-wrapper">
<div class="glass">Fallback-aware glass panel</div>
</div>
Быстрая проверка
Что должен иметь элемент, чтобы backdrop-filter был виден?
Итоги
backdrop-filter применяет эффекты фильтра к тому, что находится за элементом. Для отображения эффекта элементу нужна прозрачность. Классический эффект матового стекла использует blur() + saturate(). Для Safari всегда добавляйте -webkit-backdrop-filter. С помощью @supports предусмотрите непрозрачный запасной вариант.
Часто задаваемые вопросы
Урок «backdrop-filter для матового стекла» бесплатный?
Да — полный текст урока «backdrop-filter для матового стекла» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «backdrop-filter для матового стекла»?
Создавайте эффекты размытия матового стекла на элементах, наложенных на другое содержимое, с помощью backdrop-filter. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «backdrop-filter для матового стекла»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- filter: blur, brightness, contrast, grayscale
- backdrop-filter для матового стекла
- mix-blend-mode для смешивания слоёв
- Свойство isolation