Панель с информацией, важным объявлением или уведомлением, с возможностью скрыть/показать без использования скриптов, на чистом 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, эта панель не будет работать на устаревших браузерах.
Комментарии: 4

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

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

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 -->
Если я вас правильно понял.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

В таком виде панель появится как раз если придёт ЛС.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы