1 747 Скрипты / Menu & Nav

Размытое меню

Сегодня сделаем простой эффект размытого меню с помощью CSS. Учтем и привередливость нашего старого... другом называть не хочется... Internet Explorer. Так что данный метод работает во всех браузерах.

HTML

Простой неупорядоченный список помещенный в DIV (можно и без него, но благодаря ему мы выравниваем положение меню на странице)

<div id="blur">
    <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Блог</a></li>
        <li class="active"><a href="#">Проекты</a></li>
        <li><a href="#">Портфолио</a></li>
        <li><a href="#">Услуги</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>
</div>

CSS

Вот наш основной CSS:

C помощью кода с псевдо элементами :before и :after
#blur:before {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    border-top: 1px solid #212121;
    content: '';
}
#blur:after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 1px;
    border-bottom: 1px solid #212121;
    content: '';
}
мы добиваемся эффекта тени у границ всего нашего DIV окружающего меню.
В IE используем фильтр, чтобы этот эффект работал и в нём:
<!--[if IE]>
    <style type="text/css">
        #blur {                
            -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)";
            filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0);
        }
    </style>
<![endif]-->
Можно использовать конечно и обычные тени, но в этом случае нам придется дополнительно использовать inset (внутренняя тень), да и большинство браузеров лучше поддерживают псевдо элементы, чем тени.
А теперь займемся размытием с помощью text-shadow, вот нужный нам кусочек из основного CSS:
/* 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 применяем фильтр:

<!--[if IE]>
    <style type="text/css">
        #blur {
            -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)";
            filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0);
        }
        #blur ul li a {
            -ms-filter"progid:DXImageTransform.Microsoft.Blur()";
            filter:  progid:DXImageTransform.Microsoft.Blur();
        }
    </style>
<![endif]-->

Ну и естественно, чтобы пользователи могли хоть как-то разобрать, что же там написано у нас в меню, текст будет отображаться нормально при наведении на пункт меню. То есть используем :hover и :focus
Вот так кстати это меню отображается в IE8


Скачать 346Загрузок 4,49 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи