Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

На сегодняшний день эффективная интерактивность и интуитивный дизайн являются ключевыми составляющими при создании успешного проекта. Различные элементы взаимодействия с пользователями несомненно добавляют движухи любому сайту или блогу. Одним из таких интерактивных элементов являются информационные блоки, , которые появляются когда пользователь совершает какие-либо важные действия.
 
Блоки уведомлений на CSS3
 
Чаще всего используется общепринятый набор уведомлений, включающий 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>, в кнопке закрытия вместо картинки элементарный спецсимвол &times;, обозначающий традиционный крестик( 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 и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 5

  • Valery: 5 августа, 2015 в 13:53

    http://codepen.io/gearmobile/pen/doaNpE
    Можно было еще содержимое ссылки модифицировать, чтобы убрать лишний × и заменить его через ::before для большей семантики.

    Ответить
    • driver: 5 августа, 2015 в 14:01

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

      Ответить
  • Valery: 5 августа, 2015 в 14:29

    есть одно НО — у вас в примере ссылка четыре раза присутствует, и четыре раза указан одинаковый id. складывается впечатление, что id повторяется на одной странице несколько раз?

    Ответить
    • driver: 5 августа, 2015 в 15:38

      id в ссылке чисто для определения стилей кнопки закрытия в css, ничего более, можно конечно всё это замутить через класс и как вы писали использовать :before для большей семантики. В этом примере js в полном объёме не участвует, так что одинаковый id у ссылок это просто селектор css, для задания стиля элементу, и повторятся он может столько раз сколько нужно.

      Ответить
  • Антон: 24 сентября, 2018 в 11:00

    Как сделать чтобы когда переходишь на разные страницы оно постоянно не выскакивало, если один раз закрыл то все

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>