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

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

26.06.201217750

На многих сайтах уже используются уведомления разного вида: где-то это просто резко появляющийся блок с текстом, где-то это всплывающее посередине экрана окошко. Здесь идея заключается не в виде уведомления на 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.

источник



Сохраните в социальную сеть
Комментарии (0)
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт