Изображения, использованные в примере, предоставлены Марком Себастьяном (Mark Sebastian), и распространяются они под лицензионным соглашением Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0). Если вам нравятся снимки Марка, то вам обязательно следует посетить его страницу в сервисе Flickr.
Пожалуйста, учтите, что данный пример будет корректно отображаться только в современных браузерах, а IE9, к сожалению, не поддерживает технологию CSS3-переходов (а также многие другие новые функции технологии). Параметр text-shadow также не поддерживается, поэтому мы решили внести дополнительные таблицы стилей для 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;
}
Теперь, давайте рассмотрим каждый из 7 примеров по-отдельности.
Пример 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
Во втором примере мы расскажем вам о том, как сделать пункты меню изначально немного скошенными. А сделать это можно посредством двумерного параметра трансформаций «skew». Значение будет -12, что исказит угол лишь по оси Х. Ссылкам будет задан полупрозрачный фон, который будет реализован за счет значения 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 тени. Также вам в помощь предлагаем следующие ресурсы:
Размытый цвет текста посредством CSS в IE – часть 1
Визуальные фильтры IE и переходы: Статичные фильтры
И на этом всё! Понравилось ли вам что-нибудь из приведенных примеров? Надеемся, что вы найдете им применение!
Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.