Панель с информацией, важным объявлением или уведомлением, с возможностью скрыть/показать без использования скриптов, на чистом CSS3.
Создание разметки.
Стоит отметить, что правильно структурированная разметка играет не мало важную роль в правильности работы задуманного, особенно если речь идёт о создании проекта только на элементах CSS3.
Структура html будет такой:
Также в нашем проекте будет использоваться два изображения -
Стили
Теперь самая важная составляющая - CSS стили, которые и позволят нашей панели работать, основная её часть:
Эта первая часть нашего кода, получиться у нас должно следующее:
Здесь вы можете задать своё цветовое оформление для панели (
Так как мы используем
Свойство:
Позволит скрыть
Аналогично и с
Когда пользователь нажимает на кнопку закрытия, панель уведомлений, а также кнопка закрытия переходят наверх и исчезают за экраном. Пока кнопка используется, панель будет за экраном, чтобы вытащить её вниз нужно вернуться в исходное положение.
Полный код будет выглядеть следующим образом:
Осталось за малым, анимация:
Следует также заметить, что как и всё что делается на 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%);
}
}
Комментарии: 4
Можно конечно.
Что-то вроде такого:
Если я вас правильно понял.
Что-то вроде такого:
Код: Выделить всё
<!-- 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 -->
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Похожие темы
-
Добрый вечер, подскажите какой запрос сделать в БД, чтобы все уведомления у всех пользователей Изменить настройки уведомлений включить оповещение на...
-
Не отображается боковая панель на некоторых страницах? на странице профиля, странице личных сообщений и т.д. Когда его не видно, его место должна...