Дмитрий Нечаев
Псевдоэлемент backdrop в CSS. Полное руководство с примерами
25 июля 2024 г.Автор
Псевдоэлемент ::backdrop в CSS позволяет стилизовать подложку под элементами, которые создают модальные (всплывающие) окна, диалоговые окна или полноэкранные режимы. Это важно для создания визуально приятного и понятного интерфейса, так как позволяет затемнить или изменить фон под всплывающим элементом, выделяя его на фоне остального контента. В этой статье мы рассмотрим, как использовать псевдоэлемент ::backdrop, какие свойства он поддерживает, и приведем практические примеры.
Основные понятия
Что такое ::backdrop?
::backdrop — это CSS псевдоэлемент, который применяется к подложке, создаваемой под элементами, находящимися в фокусе, например, под модальными окнами (<dialog>), элементами в полноэкранном режиме или под элементами с атрибутом backdrop.
Применение псевдоэлемента
Для применения стилей к подложке всплывающих элементов необходимо использовать синтаксис ::backdrop в вашем CSS файле.
::backdrop {
/* стили */
}Поддерживаемые свойства
Псевдоэлемент ::backdrop поддерживает множество CSS свойств, таких как:
background— фон подложки;opacity— прозрачность подложки;filter— применение фильтров, таких как размытие;backdrop-filter— применение эффектов фильтра непосредственно к подложке.
Пример использования
Рассмотрим простой пример, где мы изменим фон подложки и добавим эффект размытия:
::backdrop {
background: rgba(0, 0, 0, 0.5); /* полупрозрачный черный фон */
backdrop-filter: blur(5px); /* размытие подложки */
}Этот код создаст полупрозрачный черный фон с эффектом размытия для подложки под модальными окнами или элементами в полноэкранном режиме.
Поддержка браузеров
Важно учитывать, что поддержка псевдоэлемента ::backdrop может варьироваться в разных браузерах. На момент написания данной статьи псевдоэлемент ::backdrop поддерживается следующими браузерами:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
Пример совместимости с браузерами
/* Общий стиль */
::backdrop {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(10px);
}Стилизация различных элементов
Псевдоэлемент ::backdrop можно применять к различным всплывающим элементам, таким как модальные окна, полноэкранные элементы и элементы диалогов.
Стилизация модальных окон
Пример применения ::backdrop к элементу <dialog>:
dialog::backdrop {
background: rgba(0, 0, 0, 0.6); /* затемнение подложки */
backdrop-filter: blur(8px); /* размытие подложки */
}Стилизация полноэкранных элементов
Пример применения ::backdrop к элементам в полноэкранном режиме:
:fullscreen::backdrop {
background: rgba(50, 50, 50, 0.8); /* темно-серый фон подложки */
opacity: 0.8; /* прозрачность подложки */
}Практические примеры
Пример 1: Модальное окно с затемненной подложкой
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример ::backdrop для модального окна</title>
<style>
dialog::backdrop {
background: rgba(0, 0, 0, 0.5); /* полупрозрачный черный фон */
}
dialog {
border: none;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
button {
margin-top: 20px;
}
</style>
</head>
<body>
<button onclick="document.querySelector('dialog').showModal();">Открыть модальное окно</button>
<dialog>
<p>Это модальное окно.</p>
<button onclick="this.parentElement.close();">Закрыть</button>
</dialog>
</body>
</html>Пример 2: Полноэкранный режим с размытой подложкой
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример ::backdrop для полноэкранного режима</title>
<style>
:fullscreen::backdrop {
background: rgba(0, 0, 0, 0.7); /* затемненная подложка */
backdrop-filter: blur(10px); /* размытие подложки */
}
#content {
margin: 50px;
padding: 20px;
border: 2px solid #000;
background: #fff;
}
</style>
</head>
<body>
<div id="content">
<p>Нажмите кнопку ниже, чтобы перейти в полноэкранный режим.</p>
<button onclick="document.documentElement.requestFullscreen();">Полноэкранный режим</button>
</div>
</body>
</html>Заключение
Псевдоэлемент ::backdrop в CSS предоставляет мощный инструмент для стилизации подложек под всплывающими элементами, такими как модальные окна и элементы в полноэкранном режиме. Используйте его, чтобы улучшить визуальную привлекательность и удобство использования вашего сайта. Следуя приведенным выше примерам и рекомендациям, вы сможете эффективно применять ::backdrop в своих проектах.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile