3 new and amazing CSS tricks every web designer must know | Woobzine

CSS only navigation blur

Many of us know the famous blur CSS menu trick the end result is great, no doubt, but you need to write a lot of code and to use sprites. In two words, that’s “not easy”.

I’ll show you how to do that with less code, and no picture. Here is a demo if you want to see before your code. (Please use an up-to-date, standard compliant, browser: Firefox, Opera or Safari.)

The HTML is just an unordered list, with links inside:

<ul class=“blur-menu”>
<li><a href=“#” title=“”>Index</a></li>
<li><a href=“#” title=“”>Lyrics</a></li>
<li><a href=“#” title=“”>Dreams</a></li>
<li><a href=“#” title=“”>Feathers</a></li>
<li><a href=“#” title=“”>Beyond</a></li>
<ul>

Now we want the whole list to change when we hover a link (blur). Moreover, we want the link we hover to react differently. Here is what we can do in CSS:

ul.blur-menu {
background: #000;
float: right;
list-style-type: none;
}

ul.blur-menu:hover li {
margin-top: -100px;
padding-bottom: 100px;
text-shadow: 0 100px 3px #fff;
}

ul.blur-menu:hover li:hover {
color: #fff;
text-shadow: 0 0 1px #fff;
margin-top: 0px;
padding-bottom: 0px;
}

ul.blur-menu li {
float: left;
margin: 0;
padding: 0 0 0 20px;
text-shadow: 0 0 10px #000;
}

ul.blur-menu li a {
color: #fff;
text-decoration: none;
}

Nice, isn’t it? Now that you have the basic idea, you can play and have fun with this trick to create simple but eye-catching menus!

via woobzine.com

Posted via web from Ben Menson’s posterous