08.12.2011 3 200 Скрипты / Menu & Nav

Размытое меню с переходами на CSS3

Очень много интересных вещей можно сделать благодаря свойствам, которые привнес CSS3. В сегодняшнем уроке по экспериментируем с текстовыми тенями и переходами, для достижения эффекта размытости при наведении на меню курсора мыши. Основная идея заключается в том, чтобы размыть другие элементы навигации, акцентируя внимание на том пункте, на который наводим мышкой.
И незабывайте, что работать всё, что описывается в этом уроке, будет должным образом в современных браузерах, к коим в полной мере нельзя пока отнести Internet Explorer, но все таки мы добавили дополнительную таблицу стилей для IE, что обеспечит показ нам хотябы элементом мменю.

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>

CSS

Почти во всех примерах у нас будет один и тот же стиль для UL и LI элементов. Изменяться будет только элемент ссылки.
Общий стиль для неупорядоченного списка такой:

.bmenu{
    padding: 0px;
    margin: 0 0 10px 0;
    position: relative;
}
.bmenu li{
    font-size: 50px;
    display: block;
}

Пример 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;
}

При наведении курсора на ссылку, мы хотим чтобы она стала более четкой, на фоне размытости других ссылок.

.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;
}

Добавив padding-left мы анимируем текущий выбранный элемент сдвинув его вправо.

Пример 2

В этом примере покажем элементы меню немного скошенными в начале. Сделаем это с помощью свойства skew 2D трансформации. Значение составит 12 градусов. У ссылок будет полупрозрачный фон за счет использования значения rgba. Также добавим прозрачности text-shadow, используя 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

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

.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;
}

Добавим сюда переход, чтобы анимировать фон при наведении. Сделаем его более прозрачным:

.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 всё это отображать не будет, хотя вы можете посетить данные странички и выкрутиться из положения:
http://www.useragentman.com/blog/2011/04/23/css-blurred-text-shadow-in-ie-part-i/
http://msdn.microsoft.com/en-us/library/ms673539%28VS.85%29.aspx

Скачать 1787Загрузок 830,67 Kb

Демо

Ссылки