Published in CSS on Wednesday, October 13th, 2004
An example of light weight tabs by combining the Sliding Doors method with the Mountaintop corners idea.
A project we've been working on required a different colored set of tabs for navigation depending on the section that the users were using. We needed three color variations and we wanted to be able to easily change the colors used by the tabs without too much markup or image hassle.
I'm a huge fan of the sliding doors method, and the navigation matrix, but trying to come up with something compact and efficient that could run different color combinations required something a little different.
The idea would be to cap the tabs with mountaintop corners, and fill the tabs with the desired background-color rather than an image. The tabs themselves would be build using a slightly modified sliding doors method.
Starting with this example, making a mountaintop version is quite simple. The following documents contain examples of the method. Where the CSS deviates from the original sliding doors method, comments have been made.
There are a couple of things worth noting here:
Quite simply, we needed a soluton that wasn't going to result in loads of CSS from the three different versions. However, even as a standalone version, the CSS is a little lighter, and compared to the Digital Web tabs (which are quite attractive), the appearance isn't too far off (and we could get ours much closer to DW's tabs if we tried).
If you were to build the tab image with enough height and the right width, you could use the image for building some nice mountaintop cornered boxes on your site, effectively recycling your background images.
Taking it one step further, you could export different width boxes (for mountaintop cornered boxes) on the same image that you use in your navigation image, with little cost in file size as there are very few colors being used here.
Here's a little example, scooped from the mountaintops article. Dan's original and something based on what is outlined above (narrowed for simplicity and please excuse my poor graphic skills at creating shadows...).
Big thanks to Philippe for keeping it honest in IE mac...
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..