Sorry to bore everyone with yet another developery post, but this does affect you designer types as well. Plus, I think it’s cool so I am going to share.

If you look closely around the web you will rarely see tabs that overlap each other. Usually, each tab is in its own self-contained box. The reason for this is that if two tabs overlap then turning one of those to its activate state requires the swapping of multiple graphics. This makes using sprites much more difficult and less effective (and if you’re still using JavaScript for image rollovers, well, that gets even messier).

So, I am working on the UI for the tabs seen to the right. You’ll notice that not only do they overlap, but each has a drop shadow that covers all the tabs and only those tabs that are “underneath” it. It is literally like we have four tabbed sheets of paper here that we want to be able to stack in any order. In my opinion, this is a pretty silky graphic effect, check it out, the PG. 2 tabs is all the way on the bottom, followed by PG. 1, then PG. 3, with PG. 4 on top.

My solution is to use absolute positioning along with transparent PNGs. Yes, transparent PNGs mean bad news for IE 6, but the solution is otherwise super-easy to work.

Simply cut out each individual tab and keep its alpha-channel transparency by saving as a PNG. Then, absolutely position each tab in its correct place on the page

Now here is the trick. If the server generates the active tab, whichever tab appears last in the HTML code will be on top based on the natural stacking order (i.e. no need to fool with z-index).

If the client-side can alter the active tab, messing with z-index is really not that difficult. I haven’t tried it, but something like the following should work thanks to jQuery.

$(‘.tab’).click( function() { $(this).siblings().css(‘z-index’, 1).end().css(‘z-index’, 2); } );

Oh yeah, if you do need rollovers this method is totally compatible with your traditional CSS sprite.

Dynamit was honored as one of the “Best Places to Work” in 2010 & 2011 by Columbus Business First newspaper and Interactive Agency of the Year. Times are even better in 2012 and we’re hiring a Web/Graphic Designer for our aggressively growing team.

This is an exciting opportunity to work on cutting edge projects for well-known brands in a dynamic, entrepreneurial and highly creative environment. Please email resumes/cover letters and portfolio information (documents or links to online examples) to Gary Moneysmith via gmoney@dynamit.us.

A web/graphic designer on the Dynamit team will:

• Be well versed with Adobe Creative Suite: Strong knowledge of Photoshop, experience with Illustrator and InDesign.
• Have a strong understanding of Usability & Web Trends: Experience with user interface design, knowledge of best practices & examples of this in a portfolio or live site/application design. They will also be up-to-date on web trends and design tactics with examples.
• Have experience in user experience design (UXD) designing application and system interfaces. This experience is crucial for this position.
• Have Basic Programming Knowledge: We’re not looking for a developer here, but the designer should have the ability to design for web with a knowledge of the boundaries and how to design for execution by a programmer.
• Have a Strong Portfolio: We’d like to see much more web work than print.
• Be eager to learn, with a passion for design & the web. The designer should have a strong internal drive for industry knowledge and be committed to furthering the craft.

Experience is important, but personality is key. Our culture is what drives us, and we’re looking to build our team with someone who both fits and contributes to it.

The position is full time at our office in the Arena District in Columbus, Ohio. We offer a competitive salary and benefits package as well as a fun, high-energy, intellectually-stimulating work environment.

Benefits Include

• Competitive salary (compensation will be based on skills and experience)
• Fully paid medical/dental insurance for employees
• Paid parking
• Unlimited vacation time (within reason)
• Office bar + climbing wall — not recommended together

Don’t sit back. If you want to work in a fast paced work environment with great people who love what they do, apply today.

About Dynamit
Dynamit is a digital agency based in the Arena District in Columbus, Ohio. We work with clients and brands on digital initiatives that include strategy, design, user experience and development. We influence communication and commerce. Client work includes Hilton Worldwide, Charley's Grilled Subs, McGraw-Hill, British Broadcasting Corporation (BBC), E-Z-GO, American Electric Power (AEP), Columbus College of Art & Design and the Ohio State Medical Center (OSUMC) to name but a few.