От автора: Сейчас мы можем делать так много классных вещей благодаря дополнительным свойствам и возможностям, которые предоставляет нам CSS3. И сегодня я покажу вам, как можно поэкспериментировать с текстовыми тенями и переходами для достижения эффекта размытия, который мы применим к элементам меню при наведении. Основная идея заключается в том, чтобы размыть все элементы меню, за исключением того, на который наведен указатель мыши.
Изображения, использованные в демо-примерах, сделаны изумительным фотографом Марком Себастьяном (Mark Sebastian) и могут быть использованы по лицензии «Атрибуция на тех же условиях» (Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0) License). Посетите сайт Flickr или персональный сайт Марка, чтобы увидеть замечательные фотографии.
Пожалуйста, обратите внимание на то, что рассмотренные примеры будут работать только в современных браузерах, и, к сожалению, Internet Explorer до сих пор не относится к данной категории, т.к. не поддерживает переходы (а также многие другие предложенные спецификацией CSS3 свойства, которые поддерживаются в других браузерах). Он также не поддерживает текстовые тени, поэтому я добавила дополнительную таблицу стилей для IE, которая позволит, по крайней мере, отобразить элементы меню.
Разметка
Давайте для начала создадим HTML структуру для нашего меню. Мы добавим ее в контейнер с фиксированной шириной. Меню будет выглядеть следующим образом:
|
1 2 3 4 5 6 7 8 |
<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 и для самих элементов списка. Изменяться будут только ссылки. Итак, вот как выглядят обычные стили для неупорядоченного списка:
|
1 2 3 4 5 6 7 8 9 |
.bmenu{ padding: 0px; margin: 0 0 10px 0; position: relative; } .bmenu li{ font-size: 50px; display: block; } |
А сейчас давайте посмотрим на каждый из семи примеров в отдельности.
Пример № 1
В первом примере мы хотим, чтобы пункты меню были изначально немного размыты. Для этого зададим для ссылок прозрачный цвет и белую тень для текста. Мы также добавим переходы для всех свойств:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.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.
В любом случае мы можем немного схитрить. Поскольку все пункты меню у нас являются блочными элементами, мы можем просто указать, что нужно сделать все размытым при наведении на все меню (неупорядоченный список), а затем при наведении на конкретный элемент сделать его четким:
|
1 2 3 4 5 6 7 8 |
.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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.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 и сделаем так, чтобы они стали размытыми на полупрозрачном фоне. А текущий элемент не будет иметь никакого фона при наведении:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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
В третьем примере мы немного поиграем с размерами элементов. Изначально мы их уменьшим и размоем. Мы будем использовать довольно медленный линейный переход:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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; } |
При наведении на меню мы размоем элементы еще больше, а текущий элемент будет при наведении становится четким и восстанавливаться до исходного размера:
|
1 2 3 4 5 6 7 8 9 10 11 |
.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
В данном варианте мы зададим для ссылок полупрозрачный черный фон и контрастный оранжевый цвет для текста. Здесь мы будем использовать для перехода линейную временную функцию:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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; } |
При наведении нам нужно, чтобы пункты меню становились размытыми, а их фоны — более прозрачными. Лишь один элемент, на который наведен указатель мыши, будет становится более непрозрачным:
|
1 2 3 4 5 6 7 8 9 |
.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
В пятом примере будут применены утонченные эффекты: мы будем использовать только белый цвет для текстовых теней и самого текста и чуть-чуть размоем элементы:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.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; } |
При наведении мы немного усилим размытие и сделаем более четким текущий элемент, сдвинув его слегка в сторону при наведении на него курсором мыши:
|
1 2 3 4 5 6 7 8 |
.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
В этом примере мы зададим для элементов полупрозрачный белый фон и изначально оставим их четкими:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.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:
|
1 2 3 4 5 6 7 8 9 10 |
.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; } |
При наведении нам нужно, чтобы элементы были размыты, а у текущего элемента изменялся бы при наведении цвет, и фон становился бы прозрачным:
|
1 2 3 4 5 6 7 8 9 |
.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 со значением равным половине ширины/высоты меню:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.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:
|
1 2 3 |
.bmenu:hover{ background: rgba(0,0,0,0.2); } |
Мы также немного подкорректируем размер шрифта и высоту строки элемента списка:
|
1 2 3 4 5 |
.bmenu li{ font-size: 40px; display: block; line-height: 66px; } |
Элементы будут уменьшены в размерах и размыты:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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; } |
При наведении на меню элементы будут становиться более размытыми, а для текущего пункта меню, который будет становится при наведении четким и увеличиваться до исходного размера, мы также зададим красивый цвет фона:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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, то ознакомьтесь со следующими материалами и начинайте экспериментировать:
Размытая текстовая тень с помощью CSS в IE — Часть I
Справочная информация по визуальным фильтрам и переходам в IE: Статические фильтры
Вот и все! Какой из примеров вам понравился больше всего? Я надеюсь, что вам понравились наши эксперименты, и это вас вдохновит на создание чего-нибудь своего!
Автор: Mary Lou
Источник: //tympanus.net/
Редакция: Команда webformyself.
