CODEWITHSUNDEEP
htmlcssblur
arranb
arranb

Reputation: 105

Blurring navigation bar

My navigation bar is suppost to all be clear until you hover your mouse over a icon. Then all of the other icon should go blurred, but at the moment all of the icons are blurred to begin with. I cant figure out how to do this. http://dl.dropbox.com/u/13722201/Dorset%20Designs/index.html

i believe you can view the css source as well if not ill post it. http://dl.dropbox.com/u/13722201/Dorset%20Designs/main.css

Upvotes: 0

Views: 1346

Answers (1)

rlemon
rlemon

Reputation: 17666

You can do this with CSS3 (there are some browser limitations) and text-shadow + transitions

http://jsfiddle.net/rlemon/sNQsy/ here is a quick demo (this will not be 100% cross browser .. ie for instance, I'll let you figure out how to fix that).

and here is the source code.

html 

<ul class="nav">
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
<li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
</ul>​

css 

.nav {
 list-style:none;    
}
.nav li {
 float: left;
 padding: 2px 12px;
}
.nav li a {
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 color: transparent;
 text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.nav li:hover a {
 color: black;
 text-shadow: none; 
}​

here is some info on transitions

here is some more reading on css transforms they will interest you

and here on text shadows

Upvotes: 3

Related Questions