ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

W3.CSS Учебник

W3.CSS Учебник W3.CSS Введение W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS Границы W3.CSS Открытки W3.CSS Шрифты W3.CSS Текст W3.CSS Округлости W3.CSS Внутренние отступы W3.CSS Внешние отступы W3.CSS Отображение W3.CSS Кнопки W3.CSS Примечания W3.CSS Цитаты W3.CSS Оповещения W3.CSS Таблицы W3.CSS Списки W3.CSS Изображения W3.CSS Вводы W3.CSS Значки W3.CSS Ярлыки W3.CSS Иконки W3.CSS Адаптив W3.CSS Макеты W3.CSS Анимация W3.CSS Эффекты W3.CSS Панели W3.CSS Выпадающие W3.CSS Аккордионы W3.CSS Навигация W3.CSS Сайдбар W3.CSS Вкладки W3.CSS Пагинация W3.CSS Прогресс-бары W3.CSS Слайдшоу W3.CSS Модальные окна W3.CSS Всплывающие подсказки W3.CSS Сетка W3.CSS Код W3.CSS Фильтры W3.CSS Тренды W3.CSS Кейс W3.CSS Material-дизайн W3.CSS Валидация W3.CSS Версии W3.CSS Мобильность

W3.CSS Цвета

W3.CSS Классы цветов W3.CSS Цвет Material W3.CSS Цвет Flat UI W3.CSS Цвет Metro UI W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов

Примеры

W3.CSS Примеры W3.CSS Демо W3.CSS Шаблоны

Справочники

W3.CSS Справочник W3.CSS Загрузки

W3.CSS Уроки для начинающих

W3.CSS Оповещения / Предупреждения


Класс w3-panel является идеальным классом для отображения всех типов оповещений (предупреждений):

×

Опасность!

Красный цвет часто указывает на опасную или негативную ситуацию.

Оповещения часто отображаются с использованием сильного (яркого) цвета:

×

Опасность!

Красный цвет часто указывает на опасную или негативную ситуацию.

Пример

<div class="w3-panel w3-red">
  <h3>Опасность!</h3>
  <p>Красный цвет часто указывает на опасную или негативную ситуацию.</p>
</div> 
Попробуйте сами »

Отображение предупреждений

×

Предупреждение!

Желтый цвет часто указывает на предупреждение, которое может потребовать внимания.

×

Предупреждение!

Желтый часто указывает на предупреждение, которое может потребовать внимания.

Пример

<div class="w3-panel w3-yellow">
  <h3>Предупреждение!</h3>
  <p>Желтый часто указывает на предупреждение, которое может потребовать внимания.</p>
</div> 
Попробуйте сами »

Отображение успеха (успешного выполнения)

×

Успех!

Зеленый часто указывает на что-то успешное или положительное.

×

Успех!

Зеленый часто указывает на что-то успешное или положительное.

Пример

<div class="w3-panel w3-green">
  <h3>Успех!</h3>
  <p>Зеленый часто указывает на что-то успешное или положительное.</p>
</div> 
Попробуйте сами »

Отображение информации

×

Инфо!

Синий часто указывает на нейтральное информативное изменение или действие.

×

Инфо!

Синий часто указывает на нейтральное информативное изменение или действие.

Пример

<div class="w3-panel w3-blue">
  <h3>Информация!</h3>
  <p>Синий часто указывает на нейтральное информативное изменение или действие.</p>
</div> 
Попробуйте сами »

Использование контейнера

Класс w3-container также может быть использован для отображения оповещений (предупреждений):

Пример

<div class="w3-container w3-red">
  <h3>Опасность!</h3>
  <p>Красный часто указывает на опасную или негативную ситуацию.</p>
</div> 
Попробуйте сами »

Оповещения во всех цветах

Оповещения часто отображаются в специальных (определённых) цветах, но можно использовать любой цвет:

Опасность!

Красный цвет часто указывает на опасную или негативную ситуацию.

Опасность!

Красный часто указывает на опасную или негативную ситуацию.

Опасность!

Красный часто указывает на опасную или негативную ситуацию.

Опасность!

Красный часто указывает на опасную или негативную ситуацию.

Опасность!

Красный часто указывает на опасную или негативную ситуацию.

Пример

<div class="w3-panel w3-blue-grey">
  <h3>Опасность!</h3>
  <p>Красный часто указывает на опасную или негативную ситуацию.</p>
</div> 
Попробуйте сами »

Закрытие оповещений

Чтобы закрыть окно предупреждения, нажмите X в правом верхнем углу:

×

Опасность!

Красный часто указывает на опасную или негативную ситуацию.

Чтобы создать X, закрывающий предупреждение, добавьте элемент <span> с классом w3-button и событием onclick:

Пример

<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">&times;</span>
Попробуйте сами »

Совет: HTML сущность &times; является предпочтительным значком для кнопок закрытия (вместо буквы "X").


Округлые оповещения

Используйте классы w3-round, если вы хотите закругленные углы:

Успех!

Здесь используется w3-round.

Успех!

Здесь используется w3-round-large.

Успех!

Здесь используется w3-round-xxlarge.

Пример

<div class="w3-panel w3-green w3-round">
Попробуйте сами »

Оповещение как карточка

Используйте класс w3-card если вы хотите, чтобы оповещение отображалось как карточка:

Предупреждение!

Желтый цвет часто указывает на то, что требует внимания.

Пример

<div class="w3-panel w3-yellow w3-card-4">
Попробуйте сами »