Панель уведомлений с функцией скрыть/показать на CSS3

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
CabinetAdmin

Панель уведомлений с функцией скрыть/показать на CSS3

CabinetAdmin 06 июл 2013, 14:09 Сообщение

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

Изображение


Создание разметки.

Стоит отметить, что правильно структурированная разметка играет не мало важную роль в правильности работы задуманного, особенно если речь идёт о создании проекта только на элементах CSS3.
Структура html будет такой:

Код: Выделить всё

<div class="notification-bar"> <input id="hide" type="radio" name="bar" value="hide"> <input id="show" type="radio" name="bar" value="show" checked="checked"> <label for="hide">Скрыть</label> <label for="show">Показать</label> <div class="notification-text">Привет мир, вы можете скрыть это уведомление, нажав соответствующую кнопку.</div> </div>


input в начале нашего кода, это своего рода ярлыки, чтобы управлять видимостью панели. По умолчанию наша панель будет видна - checked="checked"
Также в нашем проекте будет использоваться два изображения - label, с помощью которых мы будем управлять видимостью нашей панели.

Стили

Теперь самая важная составляющая - CSS стили, которые и позволят нашей панели работать, основная её часть:

Код: Выделить всё

.notification-bar { position: absolute; width: 100%; top: 0px; } .notification-text { background-color: #2980B9; padding: 15px 0; color: #fff; font-size: 14px; text-align: center; position: absolute; width: 100%; -webkit-animation: initiate 350ms ease; -moz-animation: initiate 350ms ease; -o-animation: initiate 350ms ease; animation: initiate 350ms ease; } .notification-bar input { display: none; } .notification-bar label { cursor: pointer; color: #fff; position: absolute; z-index: 5; display: inline-block; text-indent: 100%; white-space: nowrap; overflow: hidden; } .notification-bar label[for=hide] { right: 15px; top: 11px; width: 24px; height: 24px; background: url('/images/notification-bar-close.png') no-repeat center center; -webkit-animation: initiate 350ms ease; -moz-animation: initiate 350ms ease; -o-animation: initiate 350ms ease; animation: initiate 350ms ease; } .notification-bar label[for=show] { width: 45px; height: 50px; border-radius: 0px 0px 3px 3px; right: 10px; background: url('/images/notification-bar-show.png') no-repeat center center #2980B9; }


Эта первая часть нашего кода, получиться у нас должно следующее:
Изображение


Здесь вы можете задать своё цветовое оформление для панели (.notification-text { - background-color: #2980B9;) и заменить изображения показа и скрытия на свои:

Изображения:
Изображение и Изображение



Так как мы используем label, мы можем применить к нему CSS3 псевдо-класс :checked, который и позволит нам отслеживать которая из id в данный момент используется:

Код: Выделить всё

.notification-bar input[value=show]:checked ~ label[for=show]


Свойство:

Код: Выделить всё

transform: translateY(-100%);

Позволит скрыть for=show иконку "показать".
Аналогично и с for=hide и самим полем с информацией.

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

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

Код: Выделить всё

/* Function */ .notification-bar input[value=show]:checked ~ label[for=show], .notification-bar input[value=hide]:checked ~ label[for=hide], .notification-bar input[value=hide]:checked ~ .notification-text { -webkit-transition: ease 350ms; -moz-transition: ease 350ms; -o-transition: ease 350ms; transition: ease 350ms; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .notification-bar input[value=hide]:checked ~ label[for=show], .notification-bar input[value=show]:checked ~ label[for=hide], .notification-bar input[value=show]:checked ~ .notification-text { -webkit-transition: ease 350ms; -moz-transition: ease 350ms; -o-transition: ease 350ms; transition: ease 350ms; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); }


Осталось за малым, анимация:

Код: Выделить всё

/* Inital Animation */ @-webkit-keyframes initiate { 0% { -webkit-transform:translateY(-100%); } 50% { -webkit-transform:translateY(-50%); } 100% { -webkit-transform:translateY(0%); } } @-moz-keyframes initiate { 0% { -moz-transform:translateY(-100%); } 50% { -moz-transform:translateY(-50%); } 100% { -moz-transform:translateY(0%); } } @-o-keyframes initiate { 0% { -o-transform:translateY(-100%); } 50% { -o-transform:translateY(-50%); } 100% { -o-transform:translateY(0%); } } @keyframes initiate { 0% { transform:translateY(-100%); } 50% { transform:translateY(-50%); } 100% { transform:translateY(0%); } }


Следует также заметить, что как и всё что делается на css3, эта панель не будет работать на устаревших браузерах.

Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

legendary

Панель уведомлений с функцией скрыть/показать на CSS3

legendary 29 янв 2016, 00:37 Сообщение

А возможно ли это панель для Личных сообщений переписать ?

Аватара пользователя
CabinetAdmin

Панель уведомлений с функцией скрыть/показать на CSS3

CabinetAdmin 29 янв 2016, 16:06 Сообщение

Можно конечно.

Что-то вроде такого:

Код: Выделить всё

<!-- IF S_USER_LOGGED_IN and (S_USER_NEW_PRIVMSG or S_USER_UNREAD_PRIVMSG) --> <div class="notification-bar"> <input id="hide" type="radio" name="bar" value="hide"> <input id="show" type="radio" name="bar" value="show" checked="checked"> <label for="hide">Скрыть</label> <label for="show">Показать</label> <div class="notification-text"> <!-- IF S_USER_NEW_PRIVMSG --> <a href="{U_PRIVATEMSGS}"><!-- IF S_USER_NEW_PRIVMSG > 1 -->{L_YOU_NEW_PMS}<!-- ELSE -->{L_YOU_NEW_PM}<!-- ENDIF --></a> <!-- ELSE --> <a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a> <!-- ENDIF --> </div> </div> <!-- ENDIF -->


Если я вас правильно понял.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

legendary

Панель уведомлений с функцией скрыть/показать на CSS3

legendary 29 янв 2016, 19:15 Сообщение

Почти правильно )) Я имел ввиду чтобы панель появлялась при наличии Новых ЛС , извините что не сразу описал точнее )))

Аватара пользователя
CabinetAdmin

Панель уведомлений с функцией скрыть/показать на CSS3

CabinetAdmin 30 янв 2016, 07:46 Сообщение

В таком виде панель появится как раз если придёт ЛС.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект



Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость