CSS3 Blur Menu

HTML

The first step is to lay down the HTML markup. Our structure is very simple.

<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.

.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

$(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');
		});
	
});