Создание CSS3 исчезающих окон уведомления. Создание красивых сообщений с помощью CSS

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

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

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

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

Разметка

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

× × × ×

× Внимание! Сообщение о критической ошибке. × Упс! Предупреждающее сообщение. × Важно! Просто информационное сообщение. × Поздравляем! Сообщение об успешном действии.

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

Для заголовков сообщений использовал тег , в кнопке закрытия вместо картинки элементарный спецсимвол & 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 ; } }

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, вы же можете использовать любой другой.

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

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

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

Давайте начнем с типов сообщений

1. Информационные сообщения

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

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

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

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

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

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

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

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

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

Теперь давайте посмотрим как такие сообщения создать

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

Body{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.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");
}

Данный код можно вставить как в тот же файл, так и вынести в таблицу стилей.

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

Info message
Successful operation message
Warning message
Error message
Validation message

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

В этом уроке я хочу объяснить, как можно создать окна уведомления, которые будут появляться сверху в теле документа. Пользователь сможет кликать на сообщения, чтобы те исчезали и в конечном итоге вообще убрать их из DOM. Развлечения ради я также добавил кнопки, на которые можно нажать, чтобы вызвать новое предупреждающее сообщение вверху страницы. Посмотрите демо, чтобы получиться более полное представление о том, что мы будем делать.

Создание документа

Для начала нам нужно создать два файла: «index.html» и «style.css». Я впишу ссылки на последнюю библиотеку jQuery , работающую через CDN на серверах Google. Html-код довольно простой, так как нам нужно всего лишь написать импровизированный текст для предупреждающего сообщения. И весь JavaScript прописываем в конце хедера, чтобы сэкономить при HTTP обращении.

CSS3 Notification Boxes Demo

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

Success!

Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.

Warning!

You did not set the proper return e-mail address. Please fill out the fields and then submit the form.

Click the error boxes to dismiss with a fading effect.

Add more by appending dynamic HTML into the page via jQuery. Plus the notifications are super easy to customize.

New Success Box New Alert Box

Перевод - Дежурка