Цель этих сообщений информирования пользователя. ТАкие сообщения должны
быть голубыми, так как люди ассоциируют этот цвет с информацией. Это
может быть любая информация, которая может быть полезна юзеру.

2. Сообщения об успехе

Сообщения об успехе должны быть показаны после того, как юзер успешно
выполнил какую-либо операцию. Успешно - означает полностью и без
ошибок. Обычно такие сообщения зеленого цвета.

3. Сообщения-предупреждения

Подобные сообщения должны быть показаны пользователю если операция
не может быть завершена. Обычно они желтого цвета.

4. Сообщения об ошибке

Сообщения об ошибке должны быть показаны только в том случае, если
операцию невозможно выполнить. Красный идеальный цвет для этого, так
как многие ассоциируют этот цвет с тревогой

5. Сообщения проверки

Еще один тип сообщений. Я предпочел для них оранжевый цвет. Подобные
сообщения показывают пользователю его ошибки (например, при заполнении
форм).

Теперь давайте посмотрим как такие сообщения создать
Нам понадобится следующий код CSS:

Данный код можно вставить как в тот же файл, так и вынести в таблицу стилей.
Теперь нам достаточно в теле документа создать слой с необходимым классом:

В корне сайта создаем папку ramki и заливаем туда картинки из архива:

Доступно только для пользователей