Автор

Временные уведомления с помощью 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

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

Здравствуйте, уважаемые читатели моего блога! А Вы пользуетесь генераторами CSS3 или HTML5? Если нет, то может стоит попробовать. Просто представьте, можно отказаться от ручного описания стилей для кнопок, углов в блоках, теней, градиентов если кто использует и так далее, так же HTML5. Зачем писать один и тот же код каждый раз при создании нового проекта, когда можно «забить» параметры в окошечки нажать кнопочку и получить готовый исходный код, а если надо то и пофиксить его!
В этой статье покажу Вам подборку из таких генераторов. Преимущественно это будут генераторы CSS3 и парочка для HTML5.


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

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


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

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


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

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


87 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close