Создание CSS3 исчезающих окон уведомления

30 июля 2013 | Опубликовано в css | 4 Комментариев »

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

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

Демо – Скачать исходный код

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

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

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>CSS3 Notification Boxes Demo</title>
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

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

<div id="content">
  <!-- Icons source http://dribbble.com/shots/913555-Flat-Web-Elements -->
  <div class="notify successbox">
    <h1>Success!</h1>
    <span class="alerticon"><img src="images/check.png" alt="checkmark" /></span>
    <p>Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.</p>
  </div>

  <div class="notify errorbox">
    <h1>Warning!</h1>
    <span class="alerticon"><img src="images/error.png" alt="error" /></span>
    <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p>
  </div>

  <p>Click the error boxes to dismiss with a fading effect.</p>

  <p>Add more by appending dynamic HTML into the page via jQuery. Plus the notifications are super easy to customize.</p>
  <div class="btns clearfix">
    <a href="#" id="newSuccessBox" class="flatbtn">New Success Box</a>
    <a href="#" id="newAlertBox" class="flatbtn">New Alert Box</a>
  </div>
</div><!-- @end #content -->

Все иконки были взяты из этого бесплатного PSD-файла. Здесь собран простой клипарт для пользовательского интерфейса. Иконки были векторными изображениями, которые я масштабировал и сделал нужного мне размера, чтобы они выглядели как галочки и кнопки Х при ошибке. Если вам нужны иконки для других типов сообщений, это не сложно: просто меняйте цвета и создавайте свои собственные изображения. Общий класс .notify я добавил к каждому блоку сообщения. Он будет задавать тень окна сообщения и оформление внутри окна.

Дополнительные классы .succesbox и .errorbox позволяют нам менять цвета и детали внутри окна сообщения. Вы можете видеть это на моем демо: страница загружается с двумя предупреждающими сообщения. На каждую из кнопок внизу можно нажать, чтобы открыть новое предупреждающее сообщение вверху страницы.

CSS стили для блока

На этот раз я не буду вдаваться в подробности сброса CSS стилей. Об этом довольно много сказано в моих предыдущих уроках. Я создал дефольный пакет типографики и еще отцентровал графический элемент с внутренним блоком (дивом) #content.Так я создаю ту часть контейнера, которая позволит jQuery выводить новые сообщения вверху страницы.

/** typography **/
h1 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 2.5em;
  line-height: 1.5em;
  letter-spacing: -0.05em;
  margin-bottom: 20px;
  padding: .1em 0;
  color: #444;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}
h1:before,
h1:after {
  content: "";
  position: relative;
  display: inline-block;
  width: 50%;
  height: 1px;
  vertical-align: middle;
  background: #f0f0f0;
}
h1:before {
  left: -.5em;
  margin: 0 0 0 -50%;
}
h1:after {
  left: .5em;
  margin: 0 -50% 0 0;
}
h1 > span {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

p {
  display: block;
  font-size: 1.35em;
  line-height: 1.5em;
  margin-bottom: 22px;
}

/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
.flatbtn {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  outline: 0;
  border: 0;
  color: #f9f8ed;
  text-decoration: none;
  background-color: #b6a742;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  font-size: 1.2em;
  font-weight: bold;
  padding: 12px 22px 12px 22px;
  line-height: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  -moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
.flatbtn:hover {
  color: #fff;
  background-color: #c4b237;
}
.flatbtn:active {
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
  box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
}

Макет сайта очень прост, чтобы сделать более заметным эффект. Каждый, кто знаком с версткой веб-страниц, должен уметь прописать эти классы в своих таблицах стилей. Я использую один и тот же стиль обычных кнопок, которые будут генерировать новые предупреждающие сообщений. Аналогичным образом я обновил внутренние стили для каждого элемента класса .notify.

/** notifications **/
.notify {
  display: block;
  background: #fff;
  padding: 12px 18px;
  max-width: 400px;
  margin: 0 auto;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 20px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;
}

.notify h1 { margin-bottom: 6px; }

.successbox h1 { color: #678361; }
.errorbox h1 { color: #6f423b; }

.successbox h1:before, .successbox h1:after { background: #cad8a9; }
.errorbox h1:before, .errorbox h1:after { background: #d6b8b7; }
.notify .alerticon {
  display: block;
  text-align: center;
  margin-bottom: 10px;
}

Я прописал несколько стандартных дополнений, которые хорошо работают в моем макете. Каждое окно уведомления имеет максимальную ширину в 400 px и отцентровано относительно страницы, используя margin: 0 auto. Также я изменил тип курсора на указатель, чтобы пользователь знал, что на внутренний элемент можно кликнуть. Теперь нам нужно создать слушатель (обработчик) событий jQuery, который будет запускать функцию каждый раз, когда пользователь кликнет на уведомлении.

Анимация jQuery

Мои JS коды по сути выполняют две конкретные операции. Сначала нам нужно обнаружить все любые существующие элементы класса .notify внутри #content DIV. Как только пользователь кликает на этом блоке .notify, мы должны снизить прозрачность блока до 0% при помощи display:none, а потом и вовсе убрать ( remove () ) элемент из DOM.

$(function(){
  $('#content').on('click', '.notify', function(){
    $(this).fadeOut(350, function(){
      $(this).remove(); // after fadeout remove from DOM
    });
  });

Если вы знакомы с jQuery этот селектор может показаться на первый взгляд странным. Мы не выделяем #content div, а ищем любой блок .notify внутри контентной области. Если вы изучите документацию о методе .on() в jQuery, то заметите, что у нас есть возможность задать еще один селектор в качестве второго параметра, который будет обновляться после изменений на странице. Вот здесь есть отличный пост на Stack Overflow, в котором все описано в мельчайших деталях.

Вторая часть моего скрипта будет срабатывать каждый раз, когда пользовать будет жать на одну из кнопок внизу страницы. ID кнопок называются так: #newSuccesBox и #newAlertBox. Всякий раз, когда пользователь нажимает на кнопку, мы останавливаем процесс по умолчанию — загрузку значения HREF и вместо этого создаем новый HTML-блок, который размещается на самом верху страницы.

// handle the additional windows
  $('#newSuccessBox').on('click', function(e){
    e.preventDefault();
    var samplehtml = $('<div class="notify successbox"> <h1>Success!</h1> <span class="alerticon"><img src="images/check.png" alt="checkmark" /></span> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');
  });
  $('#newAlertBox').on('click', function(e){
    e.preventDefault();
    var samplehtml = $('<div class="notify errorbox"> <h1>Warning!</h1> <span class="alerticon"><img src="images/error.png" alt="error" /></span> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');
  });
});

У каждой функции своя переменная, которая содержит копию HTML-кода, которым описаны элементы сообщений. Этот HTML-код хранится в ветке, которую селектор jQuery использует как объект. Я могу использовать метод prependTo() и выбрать content div. Тогда предупреждающее сообщение появится в самом верху страницы. Все новые окна сообщений также могут быть закрыты, ведь их HTML-код идентичен коду сообщений в оригинальном, статичном HTML.

Демо – Скачать исходный код

Автор урока Jake Rocheleau

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

Опубликовано в css, июля 30, 2013
Метки: css, css3, Jquery, урок, урок css3

�

flipper
31 июля 2013 в 14:34
+2

Причём здесь цсс3, когда используется джаваскрипт?

Ant Ответ:
августа 1, 2013 at 5:54 дп

+2

Ну что вы, есть же в стилях border-radius и box-shadow :-D
Денис
4 сентября 2013 в 12:50
0

h1 > span {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
Так внутри h1 нету спанов :(