Пример № 3
В третьем примере мы немного поиграем с размерами элементов. Изначально мы их уменьшим и размоем. Мы будем использовать довольно медленный линейный переход:
01..bmenu li a{02.white-space: nowrap;03.color: transparent;04.display: block;05.text-transform: uppercase;06.text-align: center;07.text-shadow: 0px 0px 6px #fff;08.letter-spacing: 1px;09.-moz-transform: scale(0.5);10.-ms-transform: scale(0.5);11.-o-transform: scale(0.5);12.-webkit-transform: scale(0.5);13.transform: scale(0.5);14.-webkit-transition: all 0.6s linear;15.-moz-transition: all 0.6s linear;16.-o-transition: all 0.6s linear;17.-ms-transition: all 0.6s linear;18.transition: all 0.6s linear;19.}
При наведении на меню мы размоем элементы еще больше, а текущий элемент будет при наведении становится четким и восстанавливаться до исходного размера:
01..bmenu:hover li a{02.text-shadow: 0px 0px 15px #fff;03.}04..bmenu li a:hover{05.text-shadow: 0px 0px 1px #fff;06.-moz-transform: scale(1);07.-ms-transform: scale(1);08.-o-transform: scale(1);09.-webkit-transform: scale(1);10.transform: scale(1);11.}Пример № 4
В данном варианте мы зададим для ссылок полупрозрачный черный фон и контрастный оранжевый цвет для текста. Здесь мы будем использовать для перехода линейную временную функцию:
01..bmenu li a{02.display: block;03.text-transform: uppercase;04.text-shadow: 0px 0px 2px #eeb213;05.color: #eeb213;06.padding: 5px 20px;07.margin: 2px;08.background: rgba(0,0,0,0.7);09.letter-spacing: 1px;10.-webkit-transition: all 0.2s linear;11.-moz-transition: all 0.2s linear;12.-o-transition: all 0.2s linear;13.-ms-transition: all 0.2s linear;14.transition: all 0.2s linear;15.}
При наведении нам нужно, чтобы пункты меню становились размытыми, а их фоны — более прозрачными. Лишь один элемент, на который наведен указатель мыши, будет становится более непрозрачным:
01..bmenu:hover li a{02.text-shadow: 0px 0px 10px #eeb213;03.color: transparent;04.background: rgba(0,0,0,0.2);05.}06..bmenu li a:hover{07.background: rgba(0,0,0,1.0);08.text-shadow: 0px 0px 1px #eeb213;09.}Пример № 5
В пятом примере будут применены утонченные эффекты: мы будем использовать только белый цвет для текстовых теней и самого текста и чуть-чуть размоем элементы:
01..bmenu li a{02.color: transparent;03.display: block;04.text-transform: uppercase;05.text-shadow: 0px 0px 4px #fff;06.letter-spacing: 1px;07.-webkit-transition: all 0.2s ease-in-out;08.-moz-transition: all 0.2s ease-in-out;09.-o-transition: all 0.2s ease-in-out;10.-ms-transition: all 0.2s ease-in-out;11.transition: all 0.2s ease-in-out;12.}
При наведении мы немного усилим размытие и сделаем более четким текущий элемент, сдвинув его слегка в сторону при наведении на него курсором мыши:
1..bmenu:hover li a{2.text-shadow: 0px 0px 6px #fff;3.}4..bmenu li a:hover{5.color: #fff;6.text-shadow: 0px 0px 1px #fff;7.padding-left: 10px;8.}Пример № 6
В этом примере мы зададим для элементов полупрозрачный белый фон и изначально оставим их четкими:
01..bmenu li a{02.white-space: nowrap;03.display: block;04.text-transform: uppercase;05.text-shadow: 1px 1px 2px rgba(71,80,23,0.3);06.color: #fff;07.padding: 5px 20px;08.margin: 2px;09.background: rgba(255,255,255,0.2);10.letter-spacing: 1px;11.-webkit-transition: all 0.4s ease-in-out;12.-moz-transition: all 0.4s ease-in-out;13.-o-transition: all 0.4s ease-in-out;14.-ms-transition: all 0.4s ease-in-out;15.transition: all 0.4s ease-in-out;16.}
Мы хотим добавить скругленные углы для первого и последнего элемента, чтобы все меню смотрелось лаконичнее, как единое целое. Для этого мы будем использовать селекторы псевдо-элементов first-child и last-child:
01..bmenu li:first-child a{02.-webkit-border-radius: 15px 15px 0px 0px;03.-moz-border-radius: 15px 15px 0px 0px;04.border-radius: 15px 15px 0px 0px;05.}06..bmenu li:last-child a{07.-webkit-border-radius: 0px 0px 15px 15px;08.-moz-border-radius: 0px 0px 15px 15px;09.border-radius: 0px 0px 15px 15px;10.}
При наведении нам нужно, чтобы элементы были размыты, а у текущего элемента изменялся бы при наведении цвет, и фон становился бы прозрачным:
01..bmenu:hover li a{02.text-shadow: 0px 0px 10px #fff;03.color: transparent;04.}05..bmenu li a:hover{06.background: transparent;07.text-shadow: 1px 1px 10px rgba(71,80,23,0.6);08.color: #c4d85a;09.}Пример № 7
И в заключительном примере я хотела сделать так, чтобы все меню смотрелось, как круг, путем добавления свойства border-radius со значением равным половине ширины/высоты меню:
01..bmenu{02.padding: 50px 0px;03.margin: 0 auto;04.position: relative;05.background: rgba(0,0,0,0.7);06.width: 500px;07.height: 400px;08.-webkit-border-radius: 250px;09.-moz-border-radius: 250px;10.border-radius: 250px;11.-webkit-transition: background-color 0.5s ease-in-out;12.-moz-transition: background-color 0.5s ease-in-out;13.-o-transition: background-color 0.5s ease-in-out;14.-ms-transition: background-color 0.5s ease-in-out;15.transition: background-color 0.5s ease-in-out;16.}
Мы добавим здесь переходы, т.к. нам нужно создать анимацию для фона при вхождении курсора мыши в область меню. Мы сделаем фон более прозрачным, используя rgba:
1..bmenu:hover{2.background: rgba(0,0,0,0.2);3.}
Мы также немного подкорректируем размер шрифта и высоту строки элемента списка:
1..bmenu li{2.font-size: 40px;3.display: block;4.line-height: 66px;5.}
Элементы будут уменьшены в размерах и размыты:
01..bmenu li a{02.white-space: nowrap;03.color: transparent;04.display: block;05.text-align: center;06.text-transform: uppercase;07.text-shadow: 0px 0px 3px #fff;08.letter-spacing: 1px;09.-moz-transform: scale(0.8);10.-ms-transform: scale(0.8);11.-o-transform: scale(0.8);12.-webkit-transform: scale(0.8);13.transform: scale(0.8);14.-webkit-transition: all 0.4s linear;15.-moz-transition: all 0.4s linear;16.-o-transition: all 0.4s linear;17.-ms-transition: all 0.4s linear;18.transition: all 0.4s linear;19.}
При наведении на меню элементы будут становиться более размытыми, а для текущего пункта меню, который будет становится при наведении четким и увеличиваться до исходного размера, мы также зададим красивый цвет фона:
01..bmenu:hover li a{02.text-shadow: 0px 0px 10px #fff;03.}04..bmenu li a:hover{05.text-shadow: none;06.color: #fff;07.background: rgba(129,6,29,0.8);08.-moz-transform: scale(1);09.-ms-transform: scale(1);10.-o-transform: scale(1);11.-webkit-transform: scale(1);12.transform: scale(1);13.}
Помните о том, что IE портит нам все веселье, но если вы хотите попробовать свою удачу в использовании собственных теней браузера IE, то ознакомьтесь со следующими материалами и начинайте экспериментировать:
Вот и все! Какой из примеров вам понравился больше всего? Я надеюсь, что вам понравились наши эксперименты, и это вас вдохновит на создание чего-нибудь своего!
