Total Followers 132,503
Today we will get a perfect and simple blurry menu effect via CSS. In addition to it, we will get a useful multiple borders effect. To achieve this effect you will need to have a basic understanding of HTML and CSS. We will work with IE filters and text-shadow, but there is no reason to worry if you have never used it, they’re all well and simply explained.
And the best part is that anything done here works almost anywhere, from IE6 to real browsers.
So, let’s work!
You can check the demo here. Source code can be downloaded from here .
Let’s start defining our basic structure. There is nothing really impressive here. We will use:
At the end of this step, your HTML should be something like this:
Blurry Menu <div id="blur"> <ul> <li> <a href="#">Home</a></li> <li> <a href="#">Blog</a></li> <li> <a href="#">Pet Projects</a></li> <li> <a href="#">Portfolio</a></li> <li> <a href="#">Services</a></li> <li> <a href="#">Contact</a></li> </ul> </div>
Sample of what this tutorial can do:
Now we are going to make a simple CSS style, positioning and giving some “life” to our menu.
Let’s use a simple noise pattern as our body background, position the menu in the center and put all menu items side-by-side. Since we want some fancy borders, we’ll need some height in our <ul>. As you know, we’ll need a clearfix, right? No.
There is a really simple way to correct this, just add “overflow: hidden” to <ul>. Instead of using all that clearfix mess, this single line does the same thing!
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blurry Menu</title>
<style type="text/css">
body {
background: #1a1a1a url(bg.jpg);
}
#blur {
position: relative;
top: 50px;
width: 100%;
border: 1px solid #000000;
border-style: solid none;
}
#blur ul {
position: relative;
top: 0;
width: 960px;
margin: 0 auto;
list-style-type: none;
overflow: hidden;
}
#blur ul li {
float: left;
position: relative;
}
#blur ul li a {
position: relative;
float: left;
padding: 20px 25px;
margin-left: 10px;
text-decoration: none;
font-family: "trebuchet ms";
font-variant: small-caps;
color: #ffffca;
z-index: 100;
}
</style>
</head>
<body>
<div id="blur">
<ul>
[...]
</ul>
</div>
</body>
As our friend Jeffrey Way has taught us, we can use :before and :after pseudo elements to create multiple borders in our elements. We will use that to create a smooth inset shadow effect.
It’s as easy as it seems, we just set “position: absolute” in our :after and :before and it can used to create multiple borders.
<style type="text/css">
#blur:before {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
border-top: 1px solid #212121; /* top border! */
content: '';
}
#blur:after {
position: absolute;
width: 100%;
height: 100%;
top: 1px;
border-bottom: 1px solid #212121; /* bottom border! */
content: '';
}
</style>
Now I’ll make a little addition, we will use IE filters to make a similar effect in IE.
The filter that we use for this effect is progid:DXImageTransform.Microsoft.Shadow. This filter has 3 main parameters:
We will use something like this in our case:
<!--[if IE]>
<style type="text/css">
#blur {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)"; /* IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0); /* IE 7- */
}
</style>
<![endif]-->
This is how the final border effect will look (zoomed):
You may be asking yourself now “Why not just use shadows in both cases?”. Well it is because we would need “inset shadow” plus a normal shadow, and most browsers have better support for pseudo elements. Anyway, you could use it as your own risk, for sure.
At the end of this step, you should have something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blurry Menu</title>
<style type="text/css">
body {
background: #1a1a1a url(bg.jpg);
}
#blur {
position: relative;
top: 50px;
width: 100%;
border: 1px solid #000000;
border-style: solid none;
}
#blur:before {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
border-top: 1px solid #212121;
content: '';
}
#blur:after {
position: absolute;
width: 100%;
height: 100%;
top: 1px;
border-bottom: 1px solid #212121;
content: '';
}
#blur ul {
position: relative;
top: 0;
width: 960px;
margin: 0 auto;
list-style-type: none;
overflow: hidden;
}
#blur ul li {
float: left;
position: relative;
}
#blur ul li a {
position: relative;
float: left;
padding: 20px 25px;
margin-left: 10px;
text-decoration: none;
font-family: "trebuchet ms";
font-variant: small-caps;
color: #ffffca;
z-index: 100;
}
</style>
<!--[if IE]>
<style type="text/css">
#blur {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0);
}
</style>
<![endif]-->
</head>
<body>
<div id="blur">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li class="active">
<a href="#">Pet Projects</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</body>
</html>
Now, we will use text-shadow and more filters to make blurry elements.
All the magic is in the text-shadow and color combination.
/* blurry styles */
#blur a {
[...]
color: transparent;
text-shadow: 0 0 2px #cacaca;
[...]
}
/* active styles */
#blur .active a, #blur .active a:hover {
color: #cacaca;
text-shadow: 0 0 2px #cacaca;
}
There is an incredible filter called progid:DXImageTransform.Microsoft.Blur, which will be useful to us at this point. We could use Shadow or even Glow filter, but the best final effect is surely with blur.
We will not need any parameter in this case, so just set up -ms-filter and filter.
<!--[if IE]>
<style type="text/css">
#blur {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0);
}
#blur ul li a {
-ms-filter: "progid:DXImageTransform.Microsoft.Blur()";
filter: progid:DXImageTransform.Microsoft.Blur();
}
</style>
<![endif]-->
You will get something like this:
Well, just blurry elements won’t be really good for our users, right? So we will make all links “normal” on hover.
For this, we will just add a :hover and :focus CSS, to ensure that tabbed navigation will work as well.
This is our final HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blurry Menu</title>
<style type="text/css">
body {
background: #1a1a1a url(bg.jpg);
}
#blur {
position: relative;
top: 50px;
width: 100%;
border: 1px solid #000000;
border-style: solid none;
}
#blur:before {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
border-top: 1px solid #212121;
content: '';
}
#blur:after {
position: absolute;
width: 100%;
height: 100%;
top: 1px;
border-bottom: 1px solid #212121;
content: '';
}
#blur ul {
position: relative;
top: 0;
width: 960px;
margin: 0 auto;
list-style-type: none;
overflow: hidden;
}
#blur li {
float: left;
position: relative;
}
#blur a {
position: relative;
float: left;
padding: 20px 25px;
margin-left: 10px;
text-decoration: none;
font-family: "trebuchet ms";
font-variant: small-caps;
color: transparent;
text-shadow: 0 0 2px #cacaca;
z-index: 100;
}
/* normal styles */
#blur a:hover, #blur a:focus {
color: #ffffca;
text-shadow: 0 0 0 transparent;
}
/* active styles */
#blur .active a, #blur .active a:hover {
color: #cacaca;
text-shadow: 0 0 2px #cacaca;
}
</style>
<!--[if IE]>
<style type="text/css">
#blur {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0);
}
#blur ul li a {
color: #ffffca;
-ms-filter: "progid:DXImageTransform.Microsoft.Blur()";
filter: progid:DXImageTransform.Microsoft.Blur();
}
#blur ul a:hover, #blur ul .active a, #blur ul a:focus {
position: relative;
margin: 2px 0 -10px 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(enabled = false)";
filter: progid:DXImageTransform.Microsoft.Blur(enabled = false);
}
</style>
<![endif]-->
<!--[if lt IE 8]>
<style type="text/css">
#blur ul a:hover, #blur ul .active a {
position: relative;
margin: 2px 4px 0 10px;
filter: progid:DXImageTransform.Microsoft.Blur(enabled = false);
}
</style>
<![endif]-->
</head>
<body>
<div id="blur">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li class="active">
<a href="#">Pet Projects</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</body>
</html>
The good point about all this blur stuff is it opens your mind to all the opportunities available with CSS3 and filters. In a lot of cases we could just use CSS effects to create wonderful effects, and what’s even better: They are ALL really simple to change. You can dynamically add, remove, and edit these effects, so if you work with (or want to create) a theme structure it could actually save you a lot of time when you start developing multiple themes.
Get The Only Freelancer crash course you will ever need to read!
I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/
Monday, April 9th, 2012 11:50
Wonderful tutorial, i made this combined with superfish menu and it works like a charm. Thanks for tutorial!
Thursday, February 2nd, 2012 17:30
What a great solution, i just wonder why there is a need in #blur a of position: relative…
it doesn’t work without it
Thursday, February 23rd, 2012 03:26
Hi mickael,
I wrote this a while ago, but I guess it’s what helps us to keep those :before and :after elements in place.
[]‘s
Wednesday, November 16th, 2011 14:51
I have a client that wants a similar style installed, it does look good I have to admit. CSS keeps surprising me. Keep it up.
Monday, November 21st, 2011 14:18
Hi Manc,
Yeah, with CSS transitions it could be even better acutally :)
[]‘s
Monday, November 21st, 2011 11:51
Can you send me a link please so I can get an idea for some future work. Thanks
Monday, November 21st, 2011 14:18
hey Adam, how about this one? http://www.1stwebdesigner.com//wp-content/uploads/2011/04/blurry-effect/demo/index.html
;)
[]‘s
Wednesday, August 10th, 2011 04:39
That’s cool! ;)
Wednesday, July 27th, 2011 20:47
Great article. That’s how you use CSS the right way!
Thursday, July 28th, 2011 17:33
Hi Amatoc!
We’re trying our best here :) thanks!
[]‘s
Thursday, July 7th, 2011 14:50
Great work!
Only one problem: It doesn’t work with Opera. The Opera-Engine does not create shadows from transparent text (which, if you come to think about it, is quite logical. How can something that is transparent cast a shadow?). Since Opera (as far as I know) only supports “normal” rgb and hsla, the solution to the problem is obvious:
#blur a {
[...]
color: hsla(360,100%,100%,0);
[...]
}
works fine here with Firefox, Safari AND Opera. :-)
Thursday, July 7th, 2011 20:42
Nice tip MrDocForbin, I really don’t try those demos in Opera.
[]‘s
Tuesday, June 14th, 2011 09:10
Wow ! what big web page !
Monday, May 16th, 2011 06:37
I’ve tried this in blogger (demo:http://paulsantosh-testblog.blogspot.com/2011/05/blurry-menu.html) but, the menu is not that much blurry.
Monday, May 16th, 2011 18:19
Hi Paul,
You have color #FFFFCA but you need color: transparent to get the result you want.
[]‘s
Thursday, April 28th, 2011 08:50
Thanks for such gr8 help. I’ve been trying this since long!
Wednesday, April 27th, 2011 13:01
Really great tutorial from start to finish. Just given this a go with your instructions and perfect first time, thank you! Looks brilliant too!
Thursday, April 28th, 2011 18:26
Thank you, Andy!
You can do some tests with different colors, background.. You can do, for example, a “steamy bathroom mirror effect”, just adjusting background to white and blur to light gray :D
[]‘s
Tuesday, April 26th, 2011 19:09
Hey iZabotin.. I just don’t know why this demo is not working, but you could use this link http://roch.com.br/demo/
Monday, October 17th, 2011 16:57
Great stuff, I love these types of tutorial, anything that can be CSS coded to achieve Flash style effects is always worth a read. An exciting time for CSS, the effects just keep getting better.
Tuesday, October 25th, 2011 13:45
Hey Jason,
Agreed! CSS3 has a pretty good support, so we could use it for almost anything!
[]‘s
Monday, April 25th, 2011 16:45
Cool! Didn’t know the multiple borders thing. Really neat trick to get the bevel without nesting divs or using an image. :)
Tuesday, April 26th, 2011 19:19
Hey Kian,
:before and :after can used for other applications too, but multiple borders is the best one, in my opinion.
[]‘s
Saturday, April 23rd, 2011 15:17
Thank you for sharing superb informations. Your site is very cool. I am impressed by the details that you have on this web site. It reveals how nicely you understand this subject. Bookmarked this website page, will come back for extra articles.
Tuesday, April 26th, 2011 19:15
Hi Tho,
Actually we have a great team in here, Dainis, Rean, Saad, and other guys that make this work.
I’ll be glad to see you here again!
Thank you!
[]‘s
Friday, April 22nd, 2011 13:50
Working on IE : Just awesome !
Thanks for this tutorial.
PS : Download link is broken
Tuesday, April 26th, 2011 19:13
Thank you William. The correct link is http://www.1stwebdesigner.com/wp-content/uploads/2011/04/blurry-effect.rar
Friday, April 22nd, 2011 13:18
It’s a nice tutorial, maybe I’ll implement it on my website too. The demo page’s link is wrong, the correct one is: blurry menu demo
Friday, April 22nd, 2011 13:16
great article, rochester! saw something similar just yesterday on css-tricks, where CSS3 animations are used to further enhance the blur effect: http://css-tricks.com/fun-with-blurred-text/
btw: the link to your demo returns a 404 page.
Tuesday, April 26th, 2011 19:08
Thank you Alex!
This is a really good article too, but my focus is in compatibility, but that “smoke” effect just blow my mind!
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
![Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]](http://www.1stwebdesigner.com/wp-content/uploads/2013/03/preview-small-webdesignvideocoursepart3.jpg "Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]")
![Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]](http://www.1stwebdesigner.com/wp-content/uploads/2013/03/preview-small-basicwebdesignvideocoursepart2.jpg "Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]")
Alex
Friday, April 22nd, 2011 13:16
great article, rochester! saw something similar just yesterday on css-tricks, where CSS3 animations are used to further enhance the blur effect: http://css-tricks.com/fun-with-blurred-text/
btw: the link to your demo returns a 404 page.
rochester
Tuesday, April 26th, 2011 19:08
Thank you Alex!
This is a really good article too, but my focus is in compatibility, but that “smoke” effect just blow my mind!
Andy
Wednesday, April 27th, 2011 13:01
Really great tutorial from start to finish. Just given this a go with your instructions and perfect first time, thank you! Looks brilliant too!
Rochester Oliveira
Thursday, April 28th, 2011 18:26
Thank you, Andy!
You can do some tests with different colors, background.. You can do, for example, a “steamy bathroom mirror effect”, just adjusting background to white and blur to light gray :D
[]‘s
Dishant Soni
Thursday, April 28th, 2011 08:50
Thanks for such gr8 help. I’ve been trying this since long!
Paul Santosh
Monday, May 16th, 2011 06:37
I’ve tried this in blogger (demo:http://paulsantosh-testblog.blogspot.com/2011/05/blurry-menu.html) but, the menu is not that much blurry.
Rochester Oliveira
Monday, May 16th, 2011 18:19
Hi Paul,
You have color #FFFFCA but you need color: transparent to get the result you want.
[]‘s
Paul Santosh
Tuesday, May 17th, 2011 07:08
Ok, I’ll try it!
Fábián Gábor
Friday, April 22nd, 2011 13:18
It’s a nice tutorial, maybe I’ll implement it on my website too. The demo page’s link is wrong, the correct one is: blurry menu demo
Rean John Uehara
Friday, April 22nd, 2011 13:30
Updated! Thanks!
William
Friday, April 22nd, 2011 13:50
Working on IE : Just awesome !
Thanks for this tutorial.
PS : Download link is broken
rochester
Tuesday, April 26th, 2011 19:13
Thank you William. The correct link is http://www.1stwebdesigner.com/wp-content/uploads/2011/04/blurry-effect.rar
Tho Tran
Saturday, April 23rd, 2011 15:17
Thank you for sharing superb informations. Your site is very cool. I am impressed by the details that you have on this web site. It reveals how nicely you understand this subject. Bookmarked this website page, will come back for extra articles.
rochester
Tuesday, April 26th, 2011 19:15
Hi Tho,
Actually we have a great team in here, Dainis, Rean, Saad, and other guys that make this work.
I’ll be glad to see you here again!
Thank you!
[]‘s
rochester
Tuesday, April 26th, 2011 19:09
Hey iZabotin.. I just don’t know why this demo is not working, but you could use this link http://roch.com.br/demo/
Jason
Monday, October 17th, 2011 16:57
Great stuff, I love these types of tutorial, anything that can be CSS coded to achieve Flash style effects is always worth a read. An exciting time for CSS, the effects just keep getting better.
Rochester Oliveira
Tuesday, October 25th, 2011 13:45
Hey Jason,
Agreed! CSS3 has a pretty good support, so we could use it for almost anything!
[]‘s
Kian Ann
Monday, April 25th, 2011 16:45
Cool! Didn’t know the multiple borders thing. Really neat trick to get the bevel without nesting divs or using an image. :)
rochester
Tuesday, April 26th, 2011 19:19
Hey Kian,
:before and :after can used for other applications too, but multiple borders is the best one, in my opinion.
[]‘s
Rahul Patil
Tuesday, June 14th, 2011 09:10
Wow ! what big web page !
Rochester Oliveira
Thursday, July 7th, 2011 20:40
Thank you, Rahul! We’re doing our best here.
Manc
Wednesday, November 16th, 2011 14:51
I have a client that wants a similar style installed, it does look good I have to admit. CSS keeps surprising me. Keep it up.
Adam Beaumont
Monday, November 21st, 2011 11:51
Can you send me a link please so I can get an idea for some future work. Thanks
Rochester Oliveira
Monday, November 21st, 2011 14:18
hey Adam, how about this one? http://www.1stwebdesigner.com//wp-content/uploads/2011/04/blurry-effect/demo/index.html
;)
[]‘s
Rochester Oliveira
Monday, November 21st, 2011 14:18
Hi Manc,
Yeah, with CSS transitions it could be even better acutally :)
[]‘s
Aleksandar
Monday, April 9th, 2012 11:50
Wonderful tutorial, i made this combined with superfish menu and it works like a charm. Thanks for tutorial!
mickael
Thursday, February 2nd, 2012 17:30
What a great solution, i just wonder why there is a need in #blur a of position: relative…
it doesn’t work without it
Rochester Oliveira
Thursday, February 23rd, 2012 03:26
Hi mickael,
I wrote this a while ago, but I guess it’s what helps us to keep those :before and :after elements in place.
[]‘s
MrDocForbin
Thursday, July 7th, 2011 14:50
Great work!
Only one problem: It doesn’t work with Opera. The Opera-Engine does not create shadows from transparent text (which, if you come to think about it, is quite logical. How can something that is transparent cast a shadow?). Since Opera (as far as I know) only supports “normal” rgb and hsla, the solution to the problem is obvious:
#blur a {
[...]
color: hsla(360,100%,100%,0);
[...]
}
works fine here with Firefox, Safari AND Opera. :-)
Rochester Oliveira
Thursday, July 7th, 2011 20:42
Nice tip MrDocForbin, I really don’t try those demos in Opera.
[]‘s
Amatoc
Wednesday, July 27th, 2011 20:47
Great article. That’s how you use CSS the right way!
Rochester Oliveira
Thursday, July 28th, 2011 17:33
Hi Amatoc!
We’re trying our best here :) thanks!
[]‘s
Derek
Wednesday, August 10th, 2011 04:39
That’s cool! ;)
Rochester Oliveira
Wednesday, August 10th, 2011 22:44
Hi Derek,
Thank you very much.
[]‘s