Автор

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

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


 

С личного опыта могу сказать, что связь между управляющими сайтом и пользователями очень важна, ведь посетителей необходимо информировать о выполненных действиях, тем самым держа в курсе последних событий. На помощь нам придут временные уведомления, которые будут появляться при выполнении определенного действия пользователем, и исчезать через указанный промежуток времени. В данном уроке мы рассмотрим как создать стильные временные уведомления с помощью анимации 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% справа). Продолжительность индикатора будет немного меньше, чем продолжительность окно анимации.


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

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

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

Подсказки являются неотъемлемой частью сайта, который содержит множество текстовой информации, по этому в данном уроке речь пойдет о создании подсказок с использованием плагина TyniTips, суть состоит в том, когда при наведении курсора мыши на выделенное слово или объект плавно всплывает подсказка с необходимым текстом, изображением или другим медиафайлом для предоставления дополнительной информации посетителю, плагин достаточно легок в использовании и не составит особого труда при внедрении в верстку сайта, и так, давайте же посмотрим что у нас с этого получилось..


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

Без музыки в наше время трудно представить себя и весь мир, популярные треки заполонили все, даже блогеры размещают аудиоплееры у себя на ресурсах чтобы радовать пользователя интересной мелодией, тем самым поднимая им настроение, но если вы делаете сайт самостоятельно, и хотели бы придать сайту музыкальности тогда этот урок для вас. В данном посте мы рассмотрим как создать простой аудиоплеер с помощью плагина jquery. Данный плеер сделан в темных тонах, тем не менее его легко редактировать, и подогнать под свой дизайн.


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

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


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

Курсор, или указатель мыши, при просмотре сайтов в интернете обычно имеет вид стрелки, а при наведении на гиперссылки принимает вид руки-указателя. Между тем, в HTML предусмотрено большое разнообразие изображений курсора и их грамотное применение может быть весьма полезно веб-дизайнерам. Простыми средствами с помощью стилей можно переопределить вид курсора и выбрать один из более десяти доступных вариантов.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close