Уведомления на CSS3

Rating: 9.8
Author: Денис Абдуллин

02017-01-031003Денис Абдуллин

На многих сайтах уже используются уведомления разного вида: где-то это просто резко появляющийся блок с текстом, где-то это всплывающее посередине экрана окошко. Здесь идея заключается не в виде уведомления на CSS3, а в том, что у каждого блока присутствует индикатор. Как только полоска индикатора заполняется, уведомление исчезает. Индикатор нужен для того, чтобы показать пользователю через какое время уведомление исчезнет с экрана.

Для начала следует показать код самого блока с оповещением. DIV внутри другого DIV – это будет наш индикатор:

Code

<div class="tn-box tn-box-color-1">
<p>Ваши настройки были успешно сохранены!</p>
<div class="tn-progress"></div>
</div>

Уведомление будет иметь классы tn-box и tn-box-color-1. Второй класс определяет цвет уведомления.

Определим стиль блока:

Code

.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;
}

Мы установили блоку значение display:none и значение прозрачности 0 (opacity:0)

Сам индикатор будет иметь следующий стиль:

Code

.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);
}

Начально значение width – 0.

В этом примере используется checkbox, который и запускает анимацию:

Code

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;
}

Если вы хотите добавить класс с JavaScript, то используйте этот CSS:

Code

.tn-box.tn-box-active {
  display: block;
  animation: fadeOut 5s linear forwards;
}

.tn-box.tn-box-active .tn-progress {
  animation: runProgress 4s linear forwards 0.5s;
}

Анимация для самого блока следующая:

Code

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

Хотя и название здесь «fadeOut», наш блок исчезает и одновременно движется вверх.

Code

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

Продолжительность анимации прогрессбара будет немного меньше, чем продолжительность анимированного блока (блок должен исчезать в первую очередь).

Еще есть мысль сделать при наведении на блок уведомления, остановку индикатора, т.е. остановку анимации. Это возможно, но, к сожалению, некоторые браузеры выдают ошибку. Попробуйте следующий код:

Code

.tn-box.tn-box-hoverpause:hover,
.tn-box.tn-box-hoverpause:hover .tn-progress{
animation-play-state: paused;
}

Надеюсь, вы и сами понимаете, что работать все это будет только в браузерах с поддержкой CSS анимации. Для других браузеров придется прибегнуть к JavaScript.

Демо страница

Скачать

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!

Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.