Набор правил CSS для формирования уведомлений

На сегодняшний день эффективная интерактивность и интуитивный дизайн являются ключевыми составляющими при создании успешного проекта. Различные элементы взаимодействия с пользователями несомненно добавляют движухи любому сайту или блогу. Одним из таких интерактивных элементов являются информационные блоки, уведомления, которые появляются когда пользователь совершает какие-либо важные действия.
 

 
Чаще всего используется общепринятый набор уведомлений, включающий 4 вида оповещений:

• Ошибки (error)  При возникновении разного рода критических ошибок, лучше если пользователь будет уведомлен.
• Предупреждения (warning)  Этот вид сообщений предупредит пользователя о проблемах в будущем ))).
• Информационный (info)  Проинформированный пользователь — это уже не «ёжик в тумане».
• Успешное выполнение задач (success)  Пользователь всё сделал правильно, это сообщение уведомит его об этом.

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

Разметка HTML

Для начала выстроим html-каркас наших уведомлений. С этим всё очень просто, поместим нужные нам сообщения в 4 div-контейнера с общим для всех классом, обзовём его class=”message” и присвоим каждому блоку уникальный идентификатор id, соответствующий типу уведомления. Например: предупреждающим прописываем id="warning", информационной панели соответственно id="info" и т.д.
Идентификаторы нам понадобятся не только для привязки к CSS, но и для реализации закрытия уведомлений через событие onClick по клику.
 

<div id="error" class="message">
    <a id="close" title="Закрыть"  href="#" onClick="document.getElementById('error').setAttribute('style','display: none;');">&times;</a>
    <span>Внимание!</span> Сообщение о критической ошибке.
</div>
 
<div id="warning" class="message">
    <a id="close" title="Закрыть"  href="#" onClick="document.getElementById('warning').setAttribute('style','display: none;');">&times;</a>
    <span>Упс!</span> Предупреждающее сообщение.
</div>
 
<div id="info" class="message">
    <a id="close" title="Закрыть"  href="#" onClick="document.getElementById('info').setAttribute('style','display: none;');">&times;</a>
    <span>Важно!</span> Просто информационное сообщение.
</div>
 
<div id="success" class="message">
    <a id="close" title="Закрыть"  href="#" onClick="document.getElementById('success').setAttribute('style','display: none;');">&times;</a>
    <span>Поздравляем!</span> Сообщение об успешном действии.
</div>

Изначально, для плавного исчезновения сообщений при закрытии, в onClick использовал свойства opacity:0; и visibility:hidden;, но так как элемент с нулевой непрозрачностью занимает то же самое место на странице, получалось пустое пространство. Пришлось пожертвовать плавностью перехода при закрытии и использовать display: none;, одно из тех свойств, которые без js нельзя анимировать(может и ошибаюсь). C помощью jQuery эта проблема решается на раз, тем более что для организации всплывающих уведомлений, воспользоваться этой библиотекой так и так придётся, но речь сейчас совсем не о том.

Для заголовков сообщений использовал тег <span>, в кнопке закрытия вместо картинки элементарный спецсимвол ×, обозначающий традиционный крестик( x ).
 

CSS

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

.message{
    background-size: 40px 40px;
    background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, 
    transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
    transparent 75%, transparent);
    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, 
    transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
    transparent 75%, transparent);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, 
    transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
    transparent 75%, transparent);
    box-shadow: 0 0 8px rgba(0,0,0,.3);        
    font:16px 'Open Sans';
    width: 85%;
    margin: 20px auto;
    padding:15px;
    -moz-animation: bg-animate 5s linear infinite;
    -webkit-animation: bg-animate 5s linear infinite;
    -ms-animation: bg-animate 5s linear infinite;
    animation: bg-animate 5s linear infinite;
}
 
.message span{font-weight:600;}
.message #close{float:right; color:inherit; text-decoration:none;}

.message#error{
    background-color:tomato;
    border-left:7px #dc3d21 solid;
    color:white;
}
 
.message#warning{
    background-color: #eaaf51;
    border-left:7px #df8b00 solid;
    color:#6b6d31;
}
 
.message#info{
    background-color: #4ea5cd;
    border-left:7px #3b8eb5 solid;
    color:#beecfc;
}
 
.message#success{
    background-color: #61b832;
    border-left:7px #55a12c solid;
    color:#296829;
}
 
@-webkit-keyframes bg-animate {
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
} 
 
@-moz-keyframes bg-animate {
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
} 
 
@keyframes bg-animate {
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}

Анимацию, которая оживляет линии градиента на фоне уведомлений, логично обозвал bg-animate, чтобы сразу было понятно, какому элементу придаём движухи. Замедление смещения позиции диагональных полос выставил в 5s (пять секунд). Левый край блоков уведомлений выделил цветом и сделал его чуточку шире.
Цвет и начертание символа кнопки закрытия соответствует шрифту сообщений. В примере, шрифт семейства «Open Sans» подключил из библиотеки шрифтов Google, вы же можете использовать любой другой.

На этом пожалуй и всё. Остаётся только посмотреть работающий пример и при неуёмном желании поковырять код:
 

 

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях: