Блоки уведомлений на CSS (информация, успех, внимание, ошибка)

Блоки уведомлений на CSS (информация, успех, внимание, ошибка): для чего нужен

Создавайте блоки, выделяющие сообщение на сайте или в блоге: уведомление о техработах, подтверждение заказа, срок акции, ошибка в форме или совет посреди текста. Выберите типы, один из четырёх стилей (боковая рамка, полная рамка, сплошной и тонкая линия), скругление и наличие кнопки закрытия.

У каждого типа свои иконка и заголовок, чтобы не полагаться только на цвет, а цвета текста хорошо контрастируют с фоном. Страница справки объясняет, когда использовать role="alert" и role="status" для уведомлений, появляющихся после действия, например отправки формы.

Как пользоваться

1. Отметьте типы уведомлений.
2. Выберите стиль и кнопку закрытия.
3. Скопируйте HTML и CSS.

Когда использовать

• Уведомления о техработах и акциях.
• Сообщения форм.
• Советы и примечания в постах.

Частые вопросы

Чем отличаются role="alert" и role="status"?

role="alert" заставляет скринридер сразу озвучить уведомление, прерывая чтение, и подходит для ошибок, появляющихся после действия, например при отправке формы с ошибкой. role="status" озвучивает без прерывания и подходит для успеха. Уведомлениям, которые уже есть на странице при её открытии, ни то ни другое не нужно, именно так инструмент их и генерирует.

Почему одного цвета недостаточно?

Тот, кто не различает красный и зелёный или пользуется монохромным экраном, не заметит разницы только по цвету. Поэтому у каждого типа свои иконка и заголовок, а цвета текста достаточно контрастны фону.

Как показать уведомление после отправки формы?

Оставьте блок в HTML с атрибутом hidden и role="alert" (для ошибки) или role="status" (для успеха) и уберите hidden через JavaScript, когда это произойдёт. Скринридер озвучит текст в момент его появления.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты