Стильные уведомления с CSS3 и Jquery

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

Демо

Типы сообщений

Все уведомления можно условно разделить на 4 типа :

  • Информация
  • Ошибка
  • Предупреждение
  • Успешное выполнение

Информация

Цель подобного уведомления проинформировать пользователя о чем-то
Стильные уведомления с CSS3 и Jquery

Ошибка

Уведомление об ошибке. Например, «Вы ввели неправильный пароль!»
Стильные уведомления с CSS3 и Jquery

Предупреждение

Например, «Если Вы закроете страницу, Ваши данные не сохранятся.»
Стильные уведомления с CSS3 и Jquery

Успешное выполнение

Уведомление, которое появляется после того, как пользователь выполнил успешно какое-то действие.
Стильные уведомления с CSS3 и Jquery

Теперь непосредственно создание.

html-код

Code
<div class=»info message» style=»top: -68px; «>  
  <h3>Произошло какое-то событие!</h3>  
  <p>Уведомление о какой-либо информации.</p>  
</div>  
   
<div class=»error message» style=»top: -68px; «>  
  <h3>Произошла ошибка</h3>  
  <p>Уведомление об ошибке.</p>  
   
</div>  
   
<div class=»warning message» style=»top: -68px; «>  
  <h3>Подождите, мы должны Вас предупредить!</h3>  
  <p>Предупреждающее уведомление.</p>  
</div>  
   
<div class=»success message» style=»top: -68px; «>  
  <h3>Поздравляем,у Вас все получилось!</h3>  
  <p>Уведомление об успешном выполнении чего-либо.</p>  
   
</div>  

CSS

Code
.message
{
  -webkit-background-size: 40px 40px;
  -moz-background-size: 40px 40px;
  background-size: 40px 40px;
  background-image: -webkit-gradient(linear, left top, right bottom,
  color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
  color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
  color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
  to(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: -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: -ms-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: -o-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);
  -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
  -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
  width: 100%;
  border: 1px solid;
  color: #fff;
  padding: 15px;
  position: fixed;
  _position: absolute;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  -webkit-animation: animate-bg 5s linear infinite;
  -moz-animation: animate-bg 5s linear infinite;
}

.info
{
  background-color: #4ea5cd;
  border-color: #3b8eb5;
}

.error
{
  background-color: #de4343;
  border-color: #c43d3d;
}

.warning
{
  background-color: #eaaf51;
  border-color: #d99a36;
}

.success
{
  background-color: #61b832;
  border-color: #55a12c;
}

.message h3
{
  margin: 0 0 5px 0;
}

.message p
{
  margin: 0;
}

@-webkit-keyframes animate-bg
{
  from {
  background-position: 0 0;
  }
  to {
  background-position: -80px 0;
  }
}

@-moz-keyframes animate-bg
{
  from {
  background-position: 0 0;
  }
  to {
  background-position: -80px 0;
  }
}

Обратите внимание, что animate-bg — который двигает диагональные полосы в сообщении будет работать тольк о в последних версиях браузеров Crome , Safari и Mozilla 5+

Строка
Code _position: absolute; /* IE6 only */
необходима для корректного отображения в IE6

JQuery

Кроме этого, в шапке между и нужно прописать скрипт
Code<script>  
var myMessages = [’info’,’warning’,’error’,’success’]; // определим типы уведомлений  
function hideAllMessages()
{
  var messagesHeights = new Array(); //в этом массиве сохраним высоту каждого уведомления
   
  for (i=0; i<myMessages.length; i++)
  {
  messagesHeights[i] = $(‘.’ + myMessages[i]).outerHeight();
  $(‘.’ + myMessages[i]).css(‘top’, -messagesHeights[i]); //передвинем элемент с области видимости
  }
}
   
function showMessage(type)
{
  $(‘.’+ type +’-trigger’).click(function(){
  hideAllMessages();  
  $(‘.’+type).animate({top:»0″}, 500);
  });
}
   
$(document).ready(function(){
   
  // При загрузке страницы уведомления должны быть скрыты
  hideAllMessages();
   
  // Показать уведомление
  for(var i=0;i<myMessages.length;i++)
  {
  showMessage(myMessages[i]);
  }
   
  // Когда на уведомлении нажали, скрыть уведомление
  $(‘.message’).click(function(){  
  $(this).animate({top: -$(this).outerHeight()}, 500);
  });  
   
});  
</script>

В этом скрипте функция hideAllMessages — скрывает уведомления, а showMessage — показывает уведомления.

К выше сказанному надо добавить еще обязательное наличие библиотеки jquery. Она так же подключается в шапке. У большинства она уже подключена.
Если Вы не знаете, подключена она у Вас или нет. Поищите в исходном коде страницы примерно следующую строчку
Code<script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js»></script>
и если ничего подобного нет, то добавьте сами над скриптом, предложенным выше.

Переведено и адаптировано с сайта http://www.red-team-design.com

По теме: