CSS3 Меню с эффектом размытия

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

Пожалуйста, обратите внимание, что это будет работать только в современных браузерах, к сожалению, 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;
}

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

.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

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

.bmenu{
    padding: 0px;
    margin: 0 0 10px 0;
    position: relative;
}
.bmenu li{
    font-size: 50px;
    display: block;
}
.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;
}

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

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

Вот, что у нас получилось:

Пример 3

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

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

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

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

Вот, что у нас получилось:

Оригинал / Перевод