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

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

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

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

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

Разметка

Для начала выстроим 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 и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

4 комментария
  1. http://codepen.io/gearmobile/pen/doaNpE

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

    Ответить
    • driver:

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

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

    Ответить
    • driver:

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

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru