Временные уведомления с помощью CSS3

CSS3 11.04.2013

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

ДЕМО

ИСХОДНИКИ

Такие тултипы легко изменять, придавать различные оттенки, по этому они отлично впишутся в дизайн любого сайта. И так, приступим.

Шаг 1. HTML

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

<section>
 <div class="tn-box tn-box-color-1">
 <p>Ваши персональные настройки были успешно сохранены!</p>
 <div class="tn-progress"></div>
 </div>
 <div class="tn-box tn-box-color-2">
 <p>Пользователь! Мы выполнили все Ваши пожелания!</p>
 <div class="tn-progress"></div>
 </div>
 <div class="tn-box tn-box-color-3">
 <p>Данное окно исчезает немного дольше!<p>
 <div class="tn-progress"></div>
 </div>
 </section>

С разметкой закончили. Теперь приступим к важнейшей части урока.

Шаг 2. CSS

Окно уведомлений будет иметь классы tn-box и tn-box-color-1 , который будет использоваться для определения различных цветов. Затем мы определяем стиль окна:

.tn-box {
 width: 360px;
 position: relative;
 margin: 0 auto 20px auto;
 padding: 25px 15px;
 text-align: left;
 border-radius: 5px;
 box-shadow:
 0 1px 1px rgba(0,0,0,0.1),
 inset 0 1px 0 rgba(255,255,255,0.6);
 opacity: 0;
 cursor: default;
 display: none;
}

.tn-box-color-1{
 background: #ffe691;
 border: 1px solid #f6db7b;
}

Мы установим окна уведомлений: по умолчанию мы сделали его не прозрачным. Индикатор будет иметь следующий стиль:

.tn-progress {
 width: 0;
 height: 4px;
 background: rgba(255,255,255,0.3);
 position: absolute;
 bottom: 5px;
 left: 2%;
 border-radius: 3px;
 box-shadow:
 inset 0 1px 1px rgba(0,0,0,0.05),
 0 -1px 0 rgba(255,255,255,0.6);
}

В этом примере будет использоваться кнопка с флажком, анимация которой начнется после ее проверки:

input.fire-check:checked ~ section .tn-box {
 display: block;
 animation: fadeOut 5s linear forwards;
}

input.fire-check:checked ~ section .tn-box .tn-progress {
 animation: runProgress 4s linear forwards 0.5s;
}

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

@keyframes fadeOut {
 0% { opacity: 0; }
 10% { opacity: 1; }
 90% { opacity: 1; transform: translateY(0px);}
 99% { opacity: 0; transform: translateY(-30px);}
 100% { opacity: 0; }
}

Идея заключается в том, что сначала исчезает окно, а затем оно делает это постепенно угасая и двигаясь немного вверх.

Анимации для индикатора выглядит следующим образом:

@keyframes runProgress {
 0% { width: 0%; background: rgba(255,255,255,0.3); }
 100% { width: 96%; background: rgba(255,255,255,1); }
}

Мы должны анимировать ширину окна до 96% (слева оставим 2%, и 2% справа). Продолжительность индикатора будет немного меньше, чем продолжительность окно анимации.