Role Club

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Role Club » CSS » Эффект размытия для меню.


Эффект размытия для меню.

Сообщений 1 страница 3 из 3

1

Итак, рассмотри эффект размытия для собственного меню с навигацией с помощью каскадной таблицы стилей 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. Выбираем стиль.

Стиль первый.

Показать|Скрыть

http://ruseller.com/lessons/les1299/img_1.jpg

В первом примере пункты меню буду изначально немного размыты, но при наведении на какой-либо пункт - они очищаются, увеличиваются, а на остальные пункты накладывается эффект сильного размытия, выделяя тем самым выбранный пункт меню. Так же мы заметим с вами изменение цвета ссылок при наведении на них.

Код:
.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;
}

Стиль второй.

Показать|Скрыть

http://ruseller.com/lessons/les1299/img_2.jpg

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

Стиль третий.

Показать|Скрыть

http://ruseller.com/lessons/les1299/img-6.jpg

В данном примере элементы имеют полупрозрачный белый фон и изначально прорисованы четко. Для первого и последнего пункта мы будем использовать скругленные углы для формирования стильного меню. При наведении курсора мыши на меню элементы размываются, а активный пункт меняет цвет и получает прозрачный фон.

Код:
.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;
}

Стиль четвёртый.

Показать|Скрыть

http://ruseller.com/lessons/les1299/img_7.jpg

В последнем примере все меню принимает форму круга. Для этого используется скругление рамки со значением радиуса равным половине высоты/ширины.
Здесь используются трансформации, так как будет анимироваться изменение изменение цвета фона при активации пункта меню. Для прозрачности используется значение 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)

+3

2

отлично! теперь любой заходя на форум будет думать, что что-то не так, пока не наведет на такое меню

0

3

Здесь главное настроить "под себя" цвета, размеры шрифтом и тому подобное, что приведёт к презентабельному виду ваше персональное меню. А так выложен базовый код.

0


Вы здесь » Role Club » CSS » Эффект размытия для меню.


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC