Размытие меню с помощью CSS3 переходов

Размытие меню с помощью CSS3 переходов

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

скачать исходникидемо

Изображения, использованные в демо-примерах, сделаны изумительным фотографом Марком Себастьяном (Mark Sebastian) и могут быть использованы по лицензии «Атрибуция на тех же условиях» (Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0) License). Посетите сайт Flickr или персональный сайт Марка, чтобы увидеть замечательные фотографии.

Пожалуйста, обратите внимание на то, что рассмотренные примеры будут работать только в современных браузерах, и, к сожалению, Internet Explorer до сих пор не относится к данной категории, т.к. не поддерживает переходы (а также многие другие предложенные спецификацией CSS3 свойства, которые поддерживаются в других браузерах). Он также не поддерживает текстовые тени, поэтому я добавила дополнительную таблицу стилей для IE, которая позволит, по крайней мере, отобразить элементы меню.

Разметка

Давайте для начала создадим HTML структуру для нашего меню. Мы добавим ее в контейнер с фиксированной шириной. Меню будет выглядеть следующим образом:

<ul class="bmenu">
	<li><a href="#">About</a></li>
	<li><a href="#">Illustrations</a></li>
	<li><a href="#">Photography</a></li>
	<li><a href="#">Web Design</a></li>
	<li><a href="#">Personal Projects</a></li>
	<li><a href="#">Contact</a></li>
</ul>

А теперь мы добавим немного стилей!

CSS

В большинстве наших примеров будут использоваться одинаковые стили для элемента ul и для самих элементов списка. Изменяться будут только ссылки. Итак, вот как выглядят обычные стили для неупорядоченного списка:

.bmenu{
    padding: 0px;
    margin: 0 0 10px 0;
    position: relative;
}
.bmenu li{
    font-size: 50px;
    display: block;
}

А сейчас давайте посмотрим на каждый из семи примеров в отдельности.

Пример № 1

В первом примере мы хотим, чтобы пункты меню были изначально немного размыты. Для этого зададим для ссылок прозрачный цвет и белую тень для текста. Мы также добавим переходы для всех свойств:

.bmenu li a{
	color: transparent;
	display: block;
	text-transform: uppercase;
	text-shadow: 0px 0px 5px #fff;
	letter-spacing: 1px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

Нам нужно, чтобы определенная ссылка при наведении становилась «четкой», а остальные — размытыми. Сейчас мы не можем в CSS прописать правило «при наведении на конкретный элемент нужно делать то-то для всех остальных родственных элементов», потому что родственный селектор — это не совсем родственный селектор. Данный селектор просто выбирает все близлежащие элементы, имеющие общего родителя в HTML.

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

.bmenu:hover li a{
	text-shadow: 0px 0px 5px #0d1a3a;
}
.bmenu li a:hover{
	color: #fff;
	text-shadow: 0px 0px 1px #fff;
	padding-left: 10px;
}

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

Пример № 2

Во втором примере мы изначально сделаем элементы меню немного скошенными. А поможет нам в этом свойство 2D трансформаций под названием skew. Значением будет -12 градусов, которое изменяет угол скоса (наклона) по оси X. У ссылок будет полупрозрачный фон, который мы получим благодаря использованию значения в rgba. А также мы добавим немного прозрачную текстовую тень, тоже используя rgba:

.bmenu li a{
	display: block;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(89,22,20,0.3);
	color: #581514;
	padding: 5px 20px;
	margin: 2px;
	background: rgba(255,255,255,0.2);
	letter-spacing: 1px;
	-webkit-transform: skew(-12deg);
	-moz-transform: skew(-12deg);
	-o-transform: skew(-12deg);
	-ms-transform: skew(-12deg);
	transform: skew(-12deg);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

При наведении на меню мы изменим угол скоса у элементов на 0 и сделаем так, чтобы они стали размытыми на полупрозрачном фоне. А текущий элемент не будет иметь никакого фона при наведении:

.bmenu:hover li a{
	color: transparent;
	text-shadow: 0px 0px 10px #fff;
	background: rgba(88,22,22,0.2);
	-webkit-transform: skew(0deg);
	-moz-transform: skew(0deg);
	-o-transform: skew(0deg);
	-ms-transform: skew(0deg);
	transform: skew(0deg);
}
.bmenu li a:hover{
	background: transparent;
	text-shadow: 1px 1px 10px rgba(89,22,20,0.6);
	color: #581514;
}

Пример № 3

В третьем примере мы немного поиграем с размерами элементов. Изначально мы их уменьшим и размоем. Мы будем использовать довольно медленный линейный переход:

.bmenu li a{
	white-space: nowrap;
	color: transparent;
	display: block;
	text-transform: uppercase;
	text-align: center;
	text-shadow: 0px 0px 6px #fff;
	letter-spacing: 1px;
	-moz-transform: scale(0.5); 
	-ms-transform: scale(0.5); 
	-o-transform: scale(0.5); 
	-webkit-transform: scale(0.5); 
	transform: scale(0.5); 
	-webkit-transition: all 0.6s linear;
	-moz-transition: all 0.6s linear;
	-o-transition: all 0.6s linear;
	-ms-transition: all 0.6s linear;
	transition: all 0.6s linear;
}

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

.bmenu:hover li a{
	text-shadow: 0px 0px 15px #fff;
}
.bmenu li a:hover{
	text-shadow: 0px 0px 1px #fff;
	-moz-transform: scale(1); 
	-ms-transform: scale(1); 
	-o-transform: scale(1); 
	-webkit-transform: scale(1); 
	transform: scale(1); 
}

Пример № 4

В данном варианте мы зададим для ссылок полупрозрачный черный фон и контрастный оранжевый цвет для текста. Здесь мы будем использовать для перехода линейную временную функцию:

.bmenu li a{
	display: block;
	text-transform: uppercase;
	text-shadow: 0px 0px 2px #eeb213;
	color: #eeb213;
	padding: 5px 20px;
	margin: 2px;
	background: rgba(0,0,0,0.7);
	letter-spacing: 1px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

При наведении нам нужно, чтобы пункты меню становились размытыми, а их фоны — более прозрачными. Лишь один элемент, на который наведен указатель мыши, будет становится более непрозрачным:

.bmenu:hover li a{
	text-shadow: 0px 0px 10px #eeb213;
	color: transparent;
	background: rgba(0,0,0,0.2);
}
.bmenu li a:hover{
	background: rgba(0,0,0,1.0);
	text-shadow: 0px 0px 1px #eeb213;
}

Пример № 5

В пятом примере будут применены утонченные эффекты: мы будем использовать только белый цвет для текстовых теней и самого текста и чуть-чуть размоем элементы:

.bmenu li a{
	color: transparent;
	display: block;
	text-transform: uppercase;
	text-shadow: 0px 0px 4px #fff;
	letter-spacing: 1px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

При наведении мы немного усилим размытие и сделаем более четким текущий элемент, сдвинув его слегка в сторону при наведении на него курсором мыши:

.bmenu:hover li a{
	text-shadow: 0px 0px 6px #fff;
}
.bmenu li a:hover{
	color: #fff;
	text-shadow: 0px 0px 1px #fff;
	padding-left: 10px;
}

Пример № 6

В этом примере мы зададим для элементов полупрозрачный белый фон и изначально оставим их четкими:

.bmenu li a{
	white-space: nowrap;
	display: block;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(71,80,23,0.3);
	color: #fff;
	padding: 5px 20px;
	margin: 2px;
	background: rgba(255,255,255,0.2);
	letter-spacing: 1px;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

Мы хотим добавить скругленные углы для первого и последнего элемента, чтобы все меню смотрелось лаконичнее, как единое целое. Для этого мы будем использовать селекторы псевдо-элементов first-child и last-child:

.bmenu li:first-child a{
	-webkit-border-radius: 15px 15px 0px 0px;
	-moz-border-radius: 15px 15px 0px 0px;
	border-radius: 15px 15px 0px 0px;
}
.bmenu li:last-child a{
	-webkit-border-radius: 0px 0px 15px 15px;
	-moz-border-radius: 0px 0px 15px 15px;
	border-radius: 0px 0px 15px 15px;
}

При наведении нам нужно, чтобы элементы были размыты, а у текущего элемента изменялся бы при наведении цвет, и фон становился бы прозрачным:

.bmenu:hover li a{
	text-shadow: 0px 0px 10px #fff;
	color: transparent;
}
.bmenu li a:hover{
	background: transparent;
	text-shadow: 1px 1px 10px rgba(71,80,23,0.6);
	color: #c4d85a;
}

Пример № 7

И в заключительном примере я хотела сделать так, чтобы все меню смотрелось, как круг, путем добавления свойства border-radius со значением равным половине ширины/высоты меню:

.bmenu{
	padding: 50px 0px;
	margin: 0 auto;
	position: relative;
	background: rgba(0,0,0,0.7);
	width: 500px;
	height: 400px;
	-webkit-border-radius: 250px;
	-moz-border-radius: 250px;
	border-radius: 250px;
	-webkit-transition: background-color 0.5s ease-in-out;
	-moz-transition: background-color 0.5s ease-in-out;
	-o-transition: background-color 0.5s ease-in-out;
	-ms-transition: background-color 0.5s ease-in-out;
	transition: background-color 0.5s ease-in-out;
}

Мы добавим здесь переходы, т.к. нам нужно создать анимацию для фона при вхождении курсора мыши в область меню. Мы сделаем фон более прозрачным, используя rgba:

.bmenu:hover{
	background: rgba(0,0,0,0.2);
}

Мы также немного подкорректируем размер шрифта и высоту строки элемента списка:

.bmenu li{
	font-size: 40px;
	display: block;
	line-height: 66px;
}

Элементы будут уменьшены в размерах и размыты:

.bmenu li a{
	white-space: nowrap;
	color: transparent;
	display: block;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0px 0px 3px #fff;
	letter-spacing: 1px;
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	-webkit-transform: scale(0.8); 
	transform: scale(0.8);
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
}

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

.bmenu:hover li a{
	text-shadow: 0px 0px 10px #fff;
}
.bmenu li a:hover{
	text-shadow: none;
	color: #fff;
	background: rgba(129,6,29,0.8);
	-moz-transform: scale(1); 
	-ms-transform: scale(1); 
	-o-transform: scale(1); 
	-webkit-transform: scale(1); 
	transform: scale(1); 
}

Помните о том, что IE портит нам все веселье, но если вы хотите попробовать свою удачу в использовании собственных теней браузера IE, то ознакомьтесь со следующими материалами и начинайте экспериментировать:

Вот и все! Какой из примеров вам понравился больше всего? Я надеюсь, что вам понравились наши эксперименты, и это вас вдохновит на создание чего-нибудь своего!

Автор: Mary Lou

Источник: http://tympanus.net/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree