Автор

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


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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

Создавая сайт каждый веб мастер пытается сделать что бы его творение одинаково читалось во всех браузерах, и это, порой, доставляет хлопот. По этому в данном уроке речь пойдет о создании и стилизации такого элемента сайта как select или проще говоря кнопки выбора. Мы будем рассматривать несколько скриптов, которые будут преобразовывать обычный элемент select в более стильный и функциональный элемент управления сайта, который отображается корректно в различных браузерах. И так, давайте же посмотрим что у нас получилось..


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

Небольшой скрипт автоматически изменит год в нижней части (футере) вашего сайта. Не нужно каждый год менять его в шаблоне сайта — обновится сам, в зависимости от настроек посетителя.


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

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


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

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


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

Надёжный хостинг

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

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close