Есть так много замечательных вещей, которые мы можем сделать с дополнительными свойствами и возможностями, которые 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;
}