Информационные заметки

Здесь вы узнаете, как сделать информационные "заметки" при помощи CSS.


Заметки

Заметки могут использоваться для информирования пользователя о различных событиях. События могут быть разных типов: предупреждения, информация, сбои или опасности, успешное выполнение.

Сбой! Какой-то текст...
Успех! Какой-то текст...
Информация! Какой-то текст...
Внимание! Какой-то текст...
Попробовать самому »

Как сделать информационные заметки

Шаг 1) Добавляем HTML:

Пример


<div class="danger">
  <p><strong>Сбой!</strong> Какой-то текст...</p>
</div>

Шаг 2) Добавляем CSS:

Пример


.danger {
  background-color: #ffdddd;
  border-left: 6px solid #f44336;
}

Попробовать самому »