Реализуем всплывающие сообщения без использования JavaScript

25 июля 2015 Антон Кулешов 1859 0

Лучший способ проинформировать посетителя вашего сайта об каких-то важных новостях или изменений это добавить блок с уведомлением, который можно будет при надобности спрятать. Сегодня мы рассмотрим один из примеров реализации данного функционала, не прибегая к JavaScript, а лишь воспользовавшись HTML и CSS3.

Реклама

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

<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">hide</label>
	<label for="show">show</label>
	<div class="notification-text">
		<!--
			Контент
		-->
	</div>
</div>

Как видите, при добавлении HTML мы воспользовались маленькой хитростью. Так как мы делаем уведомления, используя лишь HTML и CSS, то мы не можем отследить фактически событие клика, но CSS позволяет нам определить состояние radio кнопки - именно используя эту возможность можно легко сэмитировать нужное нам состояние. Привязав наши кнопки к тегам label, мы можем указать нужную нам текстовку. Далее останется дело за стилями, которые мы будем использовать.

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

.notification-bar{
	position: absolute;
	width: 100%;
	top: 0;
}

Теперь нам необходимо спрятать radio кнопки:

.notification-bar input{
	display: none;
}

Контент, который будет информировать пользователя о новостях и событиях на сайте, мы поместим в блок с классом notification-text и зададим ему стили:

.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;
}

Укажем CSS свойства для кнопок:

.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(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(show.png) no-repeat center center #2980B9;
}

У кнопок есть общие правила: как и для каждого из состояний, когда сообщение спрятано, так и в случае, когда показывается. Если замарочиться и добавить немного JavaScript, а именно куку для отслеживания состояния, то при обновлении страницы пользователю не потребуется заново его скрывать. Но здесь мы рассмотрели, что можно сделать воспользовавшиеся лишь HTML и CSS.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Эффект печатающий машинки на JavaScript

14 марта 2016 Антон Кулешов

Сегодня я подготовил ответ на вопрос, который пришел мне на почту. Уже из названия можно понять, о чем пойдет речь. Меня спросили: если у меня скрипты с эффектами набора текста на JavaScript. К сожалению, мне не доводилось использовать у себя в практике данный эффект, но написать его будет несложно. К слову, порывшись у себя в закромах, я смог найти jQuery плагин, решающий данную проблему, о котором мы обязательно поговорим в одной из следующих статей, а пока напишем свой скрипт/сниппет.

Adipoli – красивое представление ваших изображений

1 апреля 2015 Антон Кулешов

Продолжаем «наводить красоту» на наших сайтах, и сегодня поговорим о плагине под названием adipoli, при помощи которого можно создавать красивые hover effects.

Делаем XML карту для сайта

22 августа 2014 Антон Кулешов

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