1stwebdesigner

Posted by ryan | Posted on 17:49

Posted: 22 Apr 2011 03:00 AM PDT

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 .

Step 1 – Basic HTML

Let’s start defining our basic structure. There is nothing really impressive here. We will use:

<ul> & <li> – As a menu is an unordered list of elements, it must be inside a ul.
<div> – Actually, it could be removed. But for easier CSS implementation and positioning, we will use it.
<a> – Sure, a menu must contain links!

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:

Step 2 – Basic CSS (with multiple borders!)

Now we are going to make a simple CSS style, positioning and giving some “life” to our menu.

Positioning and basic style

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.

Wait, wait, wait. No clearfix? What about the floats?

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>

Multiple borders

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:

color – Shadow’s color. In this case we use #212121.
direction – 0~360 degrees. It’s useful to control where shadow should spread to.
strength – It controls the “amount” of shadow. We don’t want a shadow effect at all ( just “multiple border” ), so leaveit as zero.

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>

Step 3 – Blurring things with CSS (IE included!)

Now, we will use text-shadow and more filters to make blurry elements.

For real browsers

All the magic is in the text-shadow and color combination.

Text-Shadow It will be set as 0 0 Npx #[color]. Where “N” controls the “radius” of the blur, and color sets the base color for the effect.
Color It will be set transparent. So the color will not “mess up” our blur with a sharp element.

/* 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; 		}

For IE

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:

Step 5 – hover settings

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>

Final Word

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.