Редактировать материал

СОХРАНИ ВАЖНОЕ

Название

Направление Формат Статус

Коротко о главном

Markdown: ## заголовок · **жирный** · списки · код

## Результат

Вы сделаете декоративный spotlight для hero-блока или карточки: мягкий градиент следует за указателем либо подсвечивает активную область. Его роль — оттенять фон, а не создавать единственный способ увидеть содержание. Маска, градиент и `clip-path` визуально интересны, но они не заменяют структуру документа, доступное имя кнопки и заметное состояние `:focus-visible`.

Нужно различать указатель и фокус. Указатель бывает не у каждого устройства, а фокус нужен клавиатуре независимо от того, нравится ли пользователю световой эффект. Не делайте spotlight подтверждением активного состояния: выбранная вкладка и раскрытая карточка должны иметь текстовую, цветовую или геометрическую метку, которая сохраняется без движения.

## Шаги

1. Сначала создайте обычный контрастный блок с заголовком, текстом и кнопкой. На нём же должен быть понятный фокус клавиатуры.
2. Добавьте градиентный слой как псевдоэлемент с `pointer-events: none`; он не должен перехватывать мышь или касания.
3. Передавайте координаты курсора в CSS custom properties только внутри одного компонента. На touch-устройствах оставьте статичное положение.
4. Не маскируйте текст так, чтобы часть фразы становилась нечитаемой. Декоративная маска должна иметь запас по контрасту и отключаться при reduced motion.
5. Пройдите компонент Tab-клавишей, затем проверьте его без hover и с высоким масштабом страницы.

## Применимый код

```css
.hero::before {
  content: ""; pointer-events: none; position: absolute; inset: 0;
  background: radial-gradient(18rem circle at var(--x, 50%) var(--y, 50%), #ffffff1f, transparent 60%);
}
.hero :focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
```

## Критерий проверки

При навигации клавиатурой фокус остаётся заметен, содержимое читается без hover, а spotlight можно убрать без изменения сценария.

### Источник

- [Using media queries for accessibility — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using_for_accessibility)

Следующий шаг Ссылка на источникСама ссылка требует интернета. Важное содержание сохраните в тексте или вложении.

Изображения, GIF, видео и PDF

До 6 файлов за одно сохранение, до 100 МБ каждый. Файлы сохраняются на компьютере.

Сохранение по кнопкеОтмена