Красивые сообщения

Иногда на сайте требуется использовать сообщения различных типов: информация, предупреждение, ошибка, успешная операция и др. Для этих целей удобно создать при помощи CSS красивые блоки.

Для начала подготовим несколько правил CSS:

.info, .success, .warning, .error, .validation
{
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
}

.info
{
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('info.png');
}

.success
{
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image:url('success.png');
}

.warning
{
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('warning.png');
}

.error
{
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('error.png');
}

.validation
{
    color: #D63301;
    background-color: #FFCCBA;
    background-image: url('validation.png');
}

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

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

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

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

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

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

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

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

Этот и другие примеры вы можете также найти в справочнике по CSS

Источник: http://www.jankoatwarpspeed.com/

Реклама