Prototype'sBlogCSS3 Blur Menu ПОДПИСАТЬСЯ
 
15
12
2017
CSS3 Blur Menu
HTML
The first step is to lay down the HTML markup. Our structure is very simple.
Code

<div class="menu">
<a href="#">Graphics</a>
<a href="#">Inspiration</a>
<a href="#">Coding</a>
<a href="#">Design</a>
<a href="#">Typography</a>
<a href="#">Freebies</a>
</div>

CSS
In next step we'll add some CSS style.
Code

.menu {
position:absolute;
top:50%;
left:300px;
margin-top:-140px;
}
   
.menu a {
display:block;
text-decoration:none;
font-family:'PT Sans Narrow', 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;
/* add the transition to all properties. */
}
   
.menu .shadow {
text-shadow: 0 0 4px #fff;
}
   
.menu .blur {
color:#2b2b2b;
text-shadow:0 0 4px #2b2b2b;
opacity:.6;
}

JavaScript
Code

$(function(){
var menu = $('.menu'),
a = menu.find('a');
a.wrapInner($('<span />'));
// include the text in <span /> element.
a.each(function(){
var t = $(this), span = t.find('span');
for (i=0;i<5;i++){
span.clone().appendTo(t);
}
// add new <span /> elements to get a strong blur effect.
});
a.hover(function(){
var t = $(this), s = t.siblings('a');
t.toggleClass('shadow');
s.toggleClass('blur');
});
});
views 5421 user JuicyBottom tags CSS3
Similar posts: