Got Chance

comment page 1

The Magic of z-index : The 24Ways Effect

When someone talks about the z-index CSS property, the first thing that comes to my mind is not a fancy lightbox or stacked up social media buttons, but the 24Ways website. According to me, its the most awesomest (i like that word, 😉 forgive me ) implementation of z-index property. Combine it with the opacity property and you can create some beautiful effects.

For detailed information about the z-index property and what all can be achieved using it, check out this post on Smashing Magazine. I’m not going to elaborate on that. In this short tutorial, you’ll learn how to use z-index like how 24Ways does.

DemoDownload

Step 1 : Mark-Up

As with any CSS effect, no special HTML mark-up should be added. It should be simple and straight-forward. So, this is the HTML code i’ll be using. No aero-science here. Simple, normal HTML.

	<div id="menu">
		<ul>
			<li><a href="#">2008</a></li>
			<li><a href="#">2009</a></li>
			<li><a href="#">2010</a></li>
			<li><a href="#">2011</a></li>
		</ul>
	</div>
	<div id="site-name">
		<h1><a href="#">gotchance.com</a><h1>
	</div>
	<div id="content">
		<div id="nav">
			<ul>
				<li><a href="#">january</a></li>
				<li><a href="#">febraury</a></li>
				<li><a href="#">march</a></li>
				<li><a href="#">april</a></li>
				<li><a href="#">may</a></li>
			</ul>
		</div>
		<p>Lorem ipsum DUMMY TEXT</p>
	</div>

Step 2 : The CSS

The CSS is pretty elaborate. So, lets take one at a time. Firstly, the top “Years” menu :

#menu {
	display: block;
	z-index: 5;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 30px;
}
#menu ul li {
	float: left;
	width: 58px;
	list-style: none;
	padding: 20px 0;
}
#menu ul li a{
	display: block;
	position: absolute;
	top: 0;
	z-index: 5;
	bottom: 0;
	padding: 10px;
}
#menu ul li a:hover {
	color: #000;
	background: #EBBD2B;
}

Here, we’re setting the z-index value for the #menu to 5 (it can be any value). Then, we’re positioning it absolutely. And, by setting the top and bottom values to 0, we make it stretch 100% vertically. The width and padding property on the li is require as a corrective measure. Otherwise, the links will stack up on top of one another.

#site-name {
	position: absolute;
	z-index: 10;
	top: 30px;
	opacity: 0.7;
	-moz-opacity: 0.7;
}
#site-name h1 {
	padding: 0;
	margin: 0;
	font-size: 128px;
	position: absolute;
	z-index: 10;
}
#site-name h1 a {
	text-decoration: none;
}

This should be quite obvious. We’re setting the z-index value for this as 10. So, it will be above our “years” menu. As i mentioned above, we use the opacity property so that the underlying “years” menu will be visible too. It adds to the “beauty” 😉 Also, we’ll be positioning this absolutely too, to enable overlapping.

#content {
	font-size: 16px;
	position: absolute;
	z-index: 15;
	top: 120px;
	bottom: 0;
	left: 0;
	padding: 0 25px;
	background: #000;
	opacity: 0.7;
	-moz-opacity: 0.7;
	filter: alpha(opacity=70);
}
#content p {
	clear: left;
	line-height: 24px;
	margin-top: 75px;
}

This will be our semi-transparent content area. With a z-index of 15, this lies above the “years” menu and the “site-name”. Also, positioned absolutely.

#content #nav {
	z-index: 20;
}
#content #nav ul {
	display: block;
}
#content #nav ul li {
	float: left;
	list-style: none;
	margin: 6px;
}
#content #nav ul li a {
	color: #ffc000;
	font-weight: bold;
	display: block;
	padding: 10px 14px;
	background: #333;
	opacity: 0.8;
	-moz-opacity: 0.8;
	filter: alpha(opacity=80);
}
#content #nav ul li a:hover {
	color: #000;
	background: #ffc000;
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}

This will be a menu inside our content area, again to one-up the “beauty” of the effect. With z-index of 20, this will be on top of all other elements. Positioned absolutely, it is set to overlap with the site-name, semi-transparently.

And, thats it. Voila ! You’ve got a pretty cool-looking webpage. You can tweak around with this technique to achieve way more beautiful results.

Have you used z-index in your layouts ? If so, share with us in the comments. I’m planning to make a series of tutorial posts based around the z-index property. If you’ve a request for a specific effect, let me know.

DemoDownload

2 Responses

Hi,this is Milissa Commins,just identified your web-site on google and i must say this blog is great.may I quote some of the Post found in the web site to my local students?i’m not sure and what you think?anyhow,Thank you!

Sure 🙂 You can..