—»     —»   Вдохновение стилями оповещений
  Раздел: Руководства   Нет комментариев  

Вдохновение стилями оповещений



Вдохновение стилями оповещений

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


Сегодня мы хотим поделиться с вами несколькими простыми примерами стилей и эффектов для оповещений на вашем веб-сайте. Существует множество методов отобразить ненавязчивое сообщение пользователям: от классического полу-заметного оповещения до панели вверху окна просмотра. Здесь на самом деле не существует ограничений в том, насколько эффективными и стильными вы можете их сделать, однако следует помнить о том, что здесь лучше не злоупотреблять, ведь пользователь может и опрокинуться на стуле, если резко вылетит что-нибудь страшное. Если вы хотите просто оповестить пользователей о чем-либо, то вам следует придерживаться простоты и минимализма.

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

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

Стоит помнить о наличии некоторых проблем с IE: вы не сможете использовать CSS-анимацию stroke-dashoffset для SVG-пути, так как она не будет работать в IE. Также могут возникнуть проблемы с переворачивающейся анимацией, которая представлена в самом низу страницы (однако в верхней части страницы она будет работать). Эффект genie не будет работать, так как IE не очень хорошо справляется с изменением значений, указанных в процентах.

Firefox (Win), в свою очередь, не очень хорошо работает с тенями блоков при переворачивании вещей, но мы все равно сохранили этот эффект переворачивания, так как во всех остальных браузерах с этим проблем нет.

В создании этих эффектов нам помогли следующие ресурсы:

* некоторые анимации были созданы при помощи bounce.js.
* snap.svg использовался для анимации фигуры для создания углового эффекта.
* Одна из анимаций SpinKit была использована для эффекта загрузки/вращения, который предшествует одному из стилей оповещений.
* Адаптированная анимация animate.css была использована для резкого эффекта переворота.

Иконки, использованные в некоторых демо, были позаимствованы из набора иконок Lineicons, а веб-шрифт был разработан при помощи приложения IcoMoon App.

Учтите, что эти демо представлены только как источник вдохновения (несмотря на то, что вы наверное сможете найти простенькие стили оповещений, которые можно использовать и в собственных сайтах). Существует множество великолепных плагинов и скриптов для создания оповещений, среди которых точно можно подобрать то, что подходит именно вам и вашему проекту.

А теперь давайте посмотрим, как мы используем эти эффекты. Мы создали небольшой скрипт оповещений, который, к примеру, может быть задействован следующим образом:

// create the notification
var notification = new NotificationFx({

// element to which the notification will be appended
// defaults to the document.body
wrapper : document.body,

// the message
message : '<p>This is a message</p>',

// layout type: growl|attached|bar|other
layout : 'growl',

// effects for the specified layout:
// for growl layout: scale|slide|genie|jelly
// for attached layout: flip|bouncyflip
// for other layout: boxspinner|cornerexpand|loadingcircle|thumbslider
// ...
effect : 'slide',

// notice, warning, error, success
// will add class ns-type-warning, ns-type-error or ns-type-success
type : 'error',

// if the user doesn&#180;t close the notification then we remove it
// after the following time
ttl : 6000,

// callbacks
onClose : function() { return false; },
onOpen : function() { return false; }

});

// show the notification
notification.show();

Это создаст следующее разделение:

<div class="ns-box ns-growl ns-effect-slide ns-type-notice ns-show">
<div class="ns-box-inner">
<p>This is a message</p>
</div>
<span class="ns-close"></span>
</div>

Стандартные стили для оповещений можно найти в ns-default.css, который мы включили в каждый эффект. Отдельные эффекты располагаются в отдельных файлах сталей, - ns-style-growl.css. Если вы хотите использовать лишь один эффект, то конечно вам стоит использовать код только для него.

Ниже приведен пример структуры и стиля эффекта:

/* Growl-style layout  */
.ns-growl {
top: 30px;
left: 30px;
max-width: 300px;
border-radius: 5px;
}

.ns-growl p {
margin: 0;
line-height: 1.3;
}

/* For hiding the notification, we'll simply reverse the applied animation by default */

[class^="ns-effect-"].ns-growl.ns-hide,
[class*=" ns-effect-"].ns-growl.ns-hide {
animation-direction: reverse;
}

/* Scale effect */
.ns-effect-scale {
background: #67c58f;
box-shadow: 0 25px 10px -15px rgba(0,0,0,0.05);
}

.ns-effect-scale a {
color: #1f8a4c;
}

.ns-effect-scale a:hover,
.ns-effect-scale a:focus {
color: #fff;
}

.ns-effect-scale .ns-close::before,
.ns-effect-scale .ns-close::after {
background: #1f8a4c;
}

.ns-effect-scale .ns-close:hover::before,
.ns-effect-scale .ns-close:hover::after {
background: #fff;
}

.ns-effect-scale.ns-show,
.ns-effect-scale.ns-hide {
animation-name: animScale;
animation-duration: 0.25s;
}

@keyframes animScale {
0% { opacity: 0; transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); }
100% { opacity: 1; transform: translate3d(0,0,0) scale3d(1,1,1); }
}

Надеемся, что вам понравились эти маленькие идеи, и они вдохновят вас на собственные стили и проекты!

* Найти этот проект на Github
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 2985   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930