Коротко: «сообщение» в CSS — это либо всплывающая плашка (тост), либо статичный блок с текстом. Разберём оба варианта, состояния (успех/ошибка) и типичные подводные камни.
Кому и зачемНужно для уведомлений «Заявка отправлена», подсказок, ошибок формы. Покажем, как сделать красиво, доступно и без «прыжков» вёрстки.
Два вида сообщений
CSS
.toast {
position: fixed;
right: 20px; bottom: 20px;
background: #1a1a1a; color: #fff;
padding: 12px 18px; border-radius: 10px;
opacity: 0; transform: translateY(10px);
transition: opacity .25s, transform .25s;
pointer-events: none;
}
.toast.is-show { opacity: 1; transform: none; pointer-events: auto; }Показ — добавление класса is-show (обычно из JS). Внизу экрана — не мешает контенту.
CSS
.message {
padding: 14px 18px; border-radius: 10px;
background: #f3f3f3; border-left: 4px solid #003F8F;
}
.message--ok { background: #f1f8f2; border-left-color: #2e7d32; }
.message--err { background: #fdf3f3; border-left-color: #992222; }Модификаторы --ok/--err задают смысл сообщения.
CSS
.message[hidden] { display: none !important; }Если у блока display:flex, атрибут hidden может «не сработать». Явное правило решает.
Практика: три задачи
1. Сообщение об успешной отправке формы
- Создайте блок
.messageс текстом. - Добавьте модификатор
--okиrole="status". - Показывайте блок после отправки через JS.
2. Всплывающее уведомление снизу
JAVASCRIPT
document.querySelector('.toast').classList.add('is-show');
setTimeout(function(){ document.querySelector('.toast').classList.remove('is-show'); }, 3000);3. Ошибка под полем
CSS
.field-error { color: #992222; font-size: 13px; margin-top: 6px; }ДоступностьДля важных уведомлений добавьте
role="status" (или alert) — скринридеры озвучат сообщение. Не делайте важное сообщение только цветом.Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
hidden не скрывает |
display:flex |
[hidden]{display:none!important} |
| Сообщение перекрывает контент | позиция в центре/поверх важного | перенести в угол/вниз |
| Появляется без анимации | нет transition |
добавить переход по opacity |
| Не видно смысла | только цвет | добавить иконку/текст |
Проверьте себя
Чек-лист
Как сделать плавное появление тоста?
Вопросы и ответы
Если у элемента display:flex, атрибут игнорируется. Добавьте [hidden]{display:none!important}.
Обычно внизу справа или внизу по центру — не перекрывает основной контент.
Да, для показа/скрытия. Статичный блок-сообщение можно выводить и без JS.
Добавьте кнопку-крестик и по клику снимайте класс is-show.
Итоги
- Тост — фиксированный, со сменой класса.
- Блок-сообщение — с модификаторами ok/err.
- Не показывайте сообщения поверх важного контента.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.