логотип PurpleSchool
Иконка входа
Вход
логотип PurpleSchool
Главная
База знаний
Псевдоэлемент backdrop в CSS. Полное руководство с примерами

Псевдоэлемент backdrop в CSS. Полное руководство с примерами

05 декабря 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