—»     —»   Размытое меню посредством CSS3 Transitions
  Раздел: Меню и Навигация, CSS/Style Sheets   Комментариев: 1  

Размытое меню посредством CSS3 Transitions



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

Размытое меню посредством CSS3 Transitions

Изображения, использованные в примере, предоставлены Марком Себастьяном (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

Размытое меню посредством CSS3 Transitions

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

.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

Размытое меню посредством CSS3 Transitions

Во втором примере мы расскажем вам о том, как сделать пункты меню изначально немного скошенными. А сделать это можно посредством двумерного параметра трансформаций «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

Размытое меню посредством CSS3 Transitions

В третьем примере мы немного поиграем с размерами элементов. Изначально мы их немного уменьшим и размоем. Используем небольшую линейную трансформацию:

.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

Размытое меню посредством CSS3 Transitions

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

.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

Размытое меню посредством CSS3 Transitions

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

.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

Размытое меню посредством CSS3 Transitions

В данном примере мы зададим элементам полупрозрачный белый цвет фона, и изначально оставим их четкими:

.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

Размытое меню посредством CSS3 Transitions

В последнем примере мы преобразуем все меню в окружность за счет параметра 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 и переходы: Статичные фильтры

И на этом всё! Понравилось ли вам что-нибудь из приведенных примеров? Надеемся, что вы найдете им применение!

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 7562   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 3 февраля 2012 @ 16:32
Написал: Михаил — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо большое сайту за эту статью. Пополню библиотеку своих CSS стилей. В работе пригодится однозначно. Спасибо еще раз.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930