Выделение области на экране CSS: туториал и решение проблемы

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

Для достижения данного эффекта можно использовать элемент div с настройками box-shadow. Это позволит акцентировать внимание на необходимой зоне и одновременно затемнить все прочие элементы экрана. Приведем экземпляр простого и рабочего решения на основе HTML и CSS:

.dim-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
  pointer-events: none;
}

.highlight-area {
  position: fixed;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 300px;
  background: #FFF;
  z-index: 2;
}

Соответствующие HTML-элементы для применения данного стиля:

<div class="dim-screen"></div>
<div class="highlight-area">Ваш контент здесь</div>

Адаптируйте размеры под свои потребности, и вы получите простое и эффективное решение.

Как это устроено?

Вариант 1: Используем "box-shadow"

Секрет кроется в использовании свойства CSS – box-shadow. Применив его к div, вы обеспечите не только наложение слоев, но и улучшите производительность вашей страницы:

.emphasized-area {
  position: fixed;
  width: 300px;
  height: 300px;
  top: 100px;
  left: 100px;
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

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

Вариант 2: Динамическое интерактив с JavaScript

Сделайте вашу страницу более интерактивной с помощью JavaScript. Разработайте функции, которые будут активировать и перемещать выделяемую область в ответ на действия пользователя:

function showHighlight(x, y, width, height) {
  const highlightArea = document.querySelector('.highlight-area');
  highlightArea.style.top = `${y}px`;
  highlightArea.style.left = `${x}px`;
  highlightArea.style.width = `${width}px`;
  highlightArea.style.height = `${height}px`;
  highlightArea.style.display = 'block';
}

function hideHighlight() {
  const highlightArea = document.querySelector('.highlight-area');
  highlightArea.style.display = 'none';
}

Вариант 3: Обратная совместимость

Современные единицы измерения, связанные с размером окна, и функция calc() могут быть не поддержаны в старых браузерах. Для обеспечения совместимости с IE9+ используйте динамические размеры, заданные в процентах, или JavaScript-полифиллы.

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

Представьте себе ночь в городе, где огни тускло мерцают. В центре этой картины есть прожектор, освещающий сцену:

🌃🔲🌃🔲🌃
🔲💡🎤💡🔲
🌃🔲🌃🔲🌃
# В то время как город погружен во мрак, сцена под прожекторами
# привлекает все взгляды.

Div действует аналогично: подчеркивает контент и делает его центром внимания.

Более прогрессивные и практичные решения

Вариант 1: SVG для нестандартных форм

Если требуется акцентировать внимание на области нестандартной формы, воспользуйтесь SVG-наложениями с прозрачными вырезами заданной формы:

<svg width="100%" height="100%">
  <rect width="100%" height="100%" fill="rgba(0,0,0,0.7)"/>
  <circle cx="250" cy="250" r="100" fill="transparent"/>
</svg>

Не забывайте устанавливать pointer-events:none для SVG-элементов, чтобы обеспечить взаимодействие с элементами под ними.

Вариант 2: Каскадные уровни для интерактивного контента

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

Вариант 3: Адаптивный дизайн

Используйте относительные единицы измерения, как проценты или единицы вьюпорта, в целях создания адаптивных зон выделения, изменяющихся в соответствии с размером экрана.

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

1. Свойство CSS box-shadow – Изучите возможность создания теневых эффектов.
2. Селектор :not() – CSS: Каскадные таблицы стилей | MDN – Исключите элементы из стилевого правила.
3. Свойство position | CSS-Tricks – Фиксируйте содержимое страницы.
4. prefers-color-scheme: Здравствуй, темнота | web.dev – Создавайте дизайн для темных и светлых тем.
5. Указательные события – CSS | MDN – Управляйте взаимодействием с элементами.
6. CSS селекторы – CSS | MDN – Точно цельтесь на элементы.