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

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

Шаг 1. HTML

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

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

Шаг 2. CSS

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

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

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

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

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

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

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

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

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.