МЕНЮ С ЭФФЕКТОМ РАЗМЫТИЯ

+ -
0
МЕНЮ С ЭФФЕКТОМ РАЗМЫТИЯ


Пример создания просто CSS3 меню с эффектом размытия (blur).

Разметка HTML
    <div class="menu">
        <a href="#">Главная</a>
        <a href="#">Форум</a>
        <a href="#">Программы</a>
        <a href="#">Игры</a>
        <a href="#">Контакты</a>
        <a href="#">Статьи</a>
    </div>


CSS
html, body {
padding:0;
margin:0;
}

body {
font-family:Arial, Helvetica, sans-serif;
background:#0c0316;
}

.menu {
position:absolute;
top:50%;
left:300px;
margin-top:-140px;
}

.menu a {
display:block;
text-decoration:none;
font-family:sans-serif;
font-size:30px;
position:relative;
height:44px;
color:#eee;
}

.menu a span {
position:absolute;
top:0;
left:0;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
-ms-transition:all .5s ease;
transition:all .5s ease;
}

.menu .shadow {
text-shadow: 0 0 4px #fff;
}

.menu .blur {
color:#2b2b2b;
text-shadow:0 0 4px #2b2b2b;
opacity:.6;
}

a {
color:#eee;
}


javascript
Подключаем jQuery:
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


и скрипт:
$(function(){
    
    var menu = $('.menu'),
        a = menu.find('a');
        
        a.wrapInner($('<span />'));
        
        a.each(function(){
            var t = $(this), span = t.find('span');
            for (i=0;i<5;i++){
                span.clone().appendTo(t);
            }
        });
        
        a.hover(function(){
            var t = $(this), s = t.siblings('a');
            t.toggleClass('shadow');
            s.toggleClass('blur');
        });
    
});


Скачать исходник:
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Комментариев 0