Стильные уведомления с CSS3 и Jquery
Уведомления о том, что какое-либо действие выполнено успешно, либо произошла какая-то ошибка — используются на любом сайте. А чтобы эти уведомления выглядели более эффектно и дружелюбно, давайте попробуем сделать их своими руками.
Демо
Типы сообщений
Все уведомления можно условно разделить на 4 типа :
- Информация
- Ошибка
- Предупреждение
- Успешное выполнение
Информация
Цель подобного уведомления проинформировать пользователя о чем-то
Ошибка
Уведомление об ошибке. Например, «Вы ввели неправильный пароль!»
Предупреждение
Например, «Если Вы закроете страницу, Ваши данные не сохранятся.»
Успешное выполнение
Уведомление, которое появляется после того, как пользователь выполнил успешно какое-то действие.
Теперь непосредственно создание.
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