Monday, December 21, 2009

Easy Fluid Rounded Gradient Tabs

Found this great, simple tutorial on Clean Tab Bar Digg-like Using CSS this morning and thought I'd create my own background image and give it a try.

The goal was to have a similar look-and-feel to an existing page (which used image-based tabs, absolute positioning, and a single background image for all of the tabs). Unfortunately, am doing this for a portal site where the tabs must be fluid and I don't know what the text is in the tabs, but I can make a guess at their typical length.

(Using Firefox 3.5.6) I started off by using the Colorzilla plugin. Clicking on the eyedropper in the lower-left hand corner and then finding the existing color of the gradient at the top and bottom of the other site's tab to determine that the top color of the gradient was #ffffff (white) and bottom color was #e8e8e8 (greyish-white). While I was using the eyedropper, I got the top and bottom positions of the tab to determine the height of the tab image I'd need, which was 45 (kind of tall).

Then, I went to Dynamic Drive: Gradient Image Maker and entered a gradient width of 400, gradient height of 45, top color of ffffff and bottom color of e8e8e8. Then I clicked on get full size image and right-clicked on the resulting image to download locally.

I then opened up Seashore and opened up the gradient image I made. I then clicked on the top rectangle to choose a color and clicked on the magnifying glass. Then I hovered over the existing site's tabs to click on each color right around the top left and top right pixels and used the pencil tool in Seashore to set those same pixels to the same color in my tab image. This was not as tedious as it sounds, and it could be done with a transparency as well to make rounded corners work with any background, but since I only needed these tabs to work on a blue background, I didn't mess with transparencies.

After the tab image looked good (even though it was much longer than it would be in the final version), I saved it and put it where the page I was going to alter could then access it easily.

Here was the fun part. Reading the Clean Tab Bar Digg-like Using CSS post, I figured out that the main gist of it was that it is as simple as having an anchor ("a" element") wrapping a span element, each using backgrounds. The span element uses the left part of the tab background, and when it ends, the encompassing anchor element uses the right part of the tab background and sets a right padding at least enough to see the top right edge of the background. The anchor and span need to have 0 top padding set so that they start at the same vertical position. For my example, the anchor needed to be display: block; margin: 0 0 0 0; padding: 0 3px 0 0; and the span needed to be display: block; margin: 0 0 0 0; padding: 0.65em 1.18em 0.65em 1.18em; (the latter padding you just need to play with until the text is centered where you want in the tab, and the 3px is length of right edge. Without the latter set, you won't see the right edge).

In our implementation, the tab only needed to show when it is active. If you wanted to show different color tabs, etc. all you have to do though is to use different single tab images like mentioned above and use the styling similar to the cur class here:

#nav { height: 45px; list-style-type: none; position: absolute; top: 110px; }
#nav li { float: left; }
#nav a { display: block; height: 45px; outline-color: -moz-use-text-color; outline-style: none; outline-width: medium; font-family: Helvetica, Arial, sans-serif; font-size: 1.16em; text-transform: uppercase; padding: 0 3px 0 0; margin: 0 0 0 0; color: #bbc2d2;} 
#nav span { display: block; margin: 0 0 0 0; padding: 0.65em 1.18em 0.65em 1.18em; }
#nav a:hover {color:white; text-decoration: none;}    
#nav .cur a {background:url('./slices/brand-new-tab.png') top right; display:block; color: #435685; font-weight: bold;}    
#nav .cur span {background:url('./slices/brand-new-tab.png') top left; display:block; color: #435685; font-weight: bold;}
And the HTML is:
<ol id="nav">
<li class="cur"><a href="..."><span>Tab 1</span></a></li>
<li><a href="..."><span>Tab 2</span></a></li>
<li><a href="..."><span>Tab 3</span></a></li>

No comments: