Красивое размытое меню на CSS3

blur-menu-logoСегодня мы будем создавать меню с эффектом размытия. В процессе создания мы познакомимся с тем, как одновременно использовать несколько эффектов для границ. Для выполнения этого задания потребуются начальные знания HTML и CSS. Мы будем использовать фильтры для IE и свойства text-shadow. Если вы не знаете как они работают — не беда — все достаточно просто. Самое приятное во всем этом, что все что мы сегодня разберем работает во всех браузерах, даже в Internet Explorer 6.

 

Вот так будет выглядеть меню, которое мы сегодня создадим:

blur menu

Посмотреть демо

Шаг 1. HTML.

Давайте создадим простую структуру. Ничего впечатляющего вы тут не найдете:

  • ul & li — для создания меню
  • div — применим для более простого применения CSS
  • a — меню будет содержать в себе ссылки

В итоге мы получим следующий HTML код:


    • www.Rusdigi.org

 

  • Демо сайт CSS3

 

 

  • Активный пункт

 

 

  • раздел CCS3

 

 

  • JavaScript

 

 

 

Шаг 2. Простой CSS. Несколько границ.

Теперь нам надо задать простые стили CSS для нашего меню, дабы спозиционировать его и немного оживить.
На этот раз мы обойдемся без использования float. Теперь есть более простой способ — добавим свойство overflow:hidden для списка ul.
Вот какой код мы получим:

body {
 background: #1a1a1a url(bg.jpg);
 }
#blur {
 position: relative;
 top: 50px;
 width: 100%;
 border: 1px solid #000000;
 border-style: solid none;
}
#blur ul {
 position: relative;
 top: 0;
 width: 960px;
 margin: 0 auto;
 list-style-type: none;
 overflow: hidden;
}
#blur ul li {
 float: left;
 position: relative;
}
#blur ul li a {
 position: relative;
 float: left;
 padding: 20px 25px;
 margin-left: 10px;
 text-decoration: none;
 font-family: "trebuchet ms";
 font-variant: small-caps;
 color: #ffffca;
 z-index: 100;
}

Далее, для того чтобы создать несколько границ, мы применим псевдо-элементы :before и :after:

#blur:before {
 position: absolute;
 top: 0px;
 width: 100%;
 height: 100%;
 border-top: 1px solid #212121; /* top border! */
 content: '';
}
#blur:after {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 1px;
 border-bottom: 1px solid #212121; /* bottom border! */
 content: '';
}

Маленькое отступление: мы будем использовать фильтр progid:DXImageTransform.Microsoft.Shadow, чтобы получить схожий эффект в Internet Explorer. Он имеет 3 основных параметра:

  • color – цвет тени. В данном случае мы используем #212121.
  • direction – 0~360 градусов. Дает возможность задать направление тени.
  • strength – этот параметр отвечает за количество теней. Нам не нужен эффект тени как таковой (только множественные границы), так что оставим его в значении 0.

В нашем случае код будет выглядеть следующим образом:


Вот так вот будут выглядеть границы в итоге:

multiple borders

После этих шагов итоговый код будет выглядеть так:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Blurry Menu


    • www.Rusdigi.org

 

  • Демо сайт CSS3

 

 

  • Активный пункт

 

 

  • раздел CCS3

 

 

  • JavaScript

 

 

 

 

Шаг 3. Эффект размытия с помощью CSS (метод IE внутри)

Теперь мы будем использовать свойство text-shadow и еще немного фильтров для IE для создания эффекта размытия.
Для нормальных браузеров мы будем использовать CSS3.
Text-Shadow будет выглядеть так: 0 0 Npx #[цвет]. Где “N” отвечает за “радиус” размытия, и «цвет» задает цвет эффекта.
Color будет установлен в прозрачный (transparent). Таким образом цвет не испортит наше размытие резкими элементами.

/* blurry styles */
#blur a {
 [...]
 color: transparent;
 text-shadow: 0 0 2px #cacaca;
 [...]
}
/* active styles */
#blur .active a, #blur .active a:hover {
 color: #cacaca;
 text-shadow: 0 0 2px #cacaca;
}

Теперь сделаем тоже самое для IE.
В данном случае мы будем использовать фильтр progid:DXImageTransform.Microsoft.Blur. Никаких особых параметров мы тут использовать не будем. Нам нужно просто задать фильтр:


В итоге у вас должно получиться что-то похожее на это:

blur menu ie vs chrome

Шаг 4. Установка стилей при наведении (hover)

Суть такова, что при наведении ссылка будет видна отчетливо. Для этого мы добавим :hover и :focus в CSS стили:

/* normal styles */
#blur a:hover, #blur a:focus {
 color: #ffffca;
 text-shadow: 0 0 0 transparent;
}
/* active styles */
#blur .active a, #blur .active a:hover {
 color: #cacaca;
 text-shadow: 0 0 2px #cacaca;
}

Для IE код будет выглядеть вот так:

#blur ul a:hover, #blur ul .active a, #blur ul a:focus {
 position: relative;
 margin: 2px 0 -10px 10px;
 -ms-filter:  "progid:DXImageTransform.Microsoft.Blur(enabled = false)";
 filter:  progid:DXImageTransform.Microsoft.Blur(enabled = false);
}

Итоги

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

Стало интересно? Почитайте другие статьи из раздела CSS3. На этом хочу пожелать вам удачи и откланяться.

Если вы хотите продать свой сайт или блог или наоборот купить готовый проект под развитие, то биржа сайтов Telderi это то, что вам нужно — продажа и покупка готовых сайтов, сайтов без домена, доменов и многое другое.



Запись опубликована в рубрике CSS3 с метками , , . Добавьте в закладки постоянную ссылку.

3 комментария: Красивое размытое меню на CSS3

  1. Уведомление: Красивое размытое меню на CSS3. | Grabr

  2. Инканта говорит:

    Ого класс!

  3. Аня говорит:

    идиотское меню аж пиздец обидно за посетителей

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *