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

25 июля 2015 Антон Кулешов 1872 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
Читайте далее

Смена изображений CSS3 слайдер

3 июня 2016 Антон Кулешов

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

Улучшаем буфер обмена Windows

23 июля 2017 Антон Кулешов
Улучшаем буфер обмена Windows

Частое явление при работе в сети – это заполнение бесконечных форм с множеством полей. Что мы делаем в большинстве случаев? Храним всё в отдельном файле и при необходимости начинаем «водить хороводы», заполняя форму копируя нужную строчку и вставляя в нужное поле. Многократное повторение данной процедуры, в конечном итоге, выливается в одну единственную форму – нужна ещё одна? – Погнали по кругу! В поисках возможности облегчить жизнь клавишам ctrl-c/v и сделать более удобным стандартный буфер обмена Windows, я набрёл на одну очень интересную утилиту под названием Ditto, которая попала в мою личную коллекцию обязательных программ для Windows.

Увеличение картинки с помощью эффекта лупы на jQuery

21 февраля 2016 Антон Кулешов

Занимаясь продажами товаров в интернете, всегда нужно уделять внимание мелочам. Ведь, как известно, именно нюансы и эти самые мелочи влияют на окончательное решение потенциального покупателя. Как же нам помочь посетителю нашего сайта детально рассмотреть его интересующий товар? На этот вопрос есть определённый ответ – это добавление эффекта лупы при наведении на картинку, о котором мы и поговорим в этой статье.