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">×</span>
Спробуйте самі »
Порада: Перевага надається значку HTML сутності × замість кнопок закриття (замість літери "X").
Округлі оповіщення
Використовуйте класи w3-round якщо ви хочете закруглені кути:
Успіх!
Тут використовується w3-round.
Успіх!
Тут використовується w3-round-large.
Успіх!
Тут використовується w3-round-xxlarge.
Оповіщення як картка
Використовуйте клас w3-card якщо хочете, щоб оповіщення відображалось як картка:
Попередження!
Жовтий колір часто вказує на те, що потребує уваги.
