Итак, рассмотри эффект размытия для собственного меню с навигацией с помощью каскадной таблицы стилей CSS.
Шаг 1. Для начала мы с вами с помощью HTML создадим собственное меню, использовав неупорядоченный список с фиксированной шириной.
<ul class="bmenu">
<li><a href="#">О нас</a></li>
<li><a href="#">Иллюстрации</a></li>
<li><a href="#">Фотографии</a></li>
<li><a href="#">Веб дизайн</a></li>
<li><a href="#">Персоналии</a></li>
<li><a href="#">Контакты</a></li>
</ul>Шаг 2. Теперь переходи к CSS.
Запишем базовое свойства для элементов ul и li. Далее рассмотрим коды для модифицирования ссылок в разных вариантах с помощью CSS.
.bmenu{
padding: 0px;
margin: 0 0 10px 0;
position: relative;
}
.bmenu li{
font-size: 50px;
display: block;
}Шаг 3. Выбираем стиль.
Стиль первый.
В первом примере пункты меню буду изначально немного размыты, но при наведении на какой-либо пункт - они очищаются, увеличиваются, а на остальные пункты накладывается эффект сильного размытия, выделяя тем самым выбранный пункт меню. Так же мы заметим с вами изменение цвета ссылок при наведении на них.
.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;
}Стиль второй.
Во втором примере пункты меню изначально немного наклонены. Выполняется такое действо с помощью 2D трансформаций (свойство skew). Также используется полупрозрачный цвет фона и тени, что достигается использованием свойства значения 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;
}
.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;
}Стиль третий.
В данном примере элементы имеют полупрозрачный белый фон и изначально прорисованы четко. Для первого и последнего пункта мы будем использовать скругленные углы для формирования стильного меню. При наведении курсора мыши на меню элементы размываются, а активный пункт меняет цвет и получает прозрачный фон.
.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;
}Стиль четвёртый.
В последнем примере все меню принимает форму круга. Для этого используется скругление рамки со значением радиуса равным половине высоты/ширины.
Здесь используются трансформации, так как будет анимироваться изменение изменение цвета фона при активации пункта меню. Для прозрачности используется значение rgba. Также устанавливаем размер шрифта и высоту строки для пункта списка. Элемент меню будет уменьшаться в размере и размываться. При наведении курсора мыши на меню элементы будут размываться сильнее, а активный пункт будет увеличиваться в размере и получать другой цвет фона.
.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;
}
.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);
}Данный урок подготовлен командой сайта http://ruseller.com/
Источник урока: http://tympanus.net/Tutorials/BlurMenu/
Отредактировано Архитектор (2011-11-22 01:05:12)
