Mail/Login: Password : forgot my password!

Making the tab widget eyecandy!

Direct link
Written by -GHAN- // Tags: css tab widget html graphics

As I am well known for stating, applications need to be eyecandy to charm the user,I felt like to give u an update on the AJAX DRIVEN TAB WIDGET. This will demonstrate the power of CSS and how less is needed to deliver high quality widgets :

Step 1: adding graphics in the right spots

Our widget consists of tabs and an output container (similar to the DSP tab widget in the all famous F1 (Help file)). In the first version, I just filled in some color in the two states of the tab. First one is to just display the tab, next is the MouseOver event or "trigger".

The Idea is to replace the color with some simple graphics. Many people think they need to put some complete graphic showing a button here. The MusicShop has pretty much of this which actually takes som KB to load. As usual we will manage this in a smarter way :)

We will take two images consisting of 23px having a payload of 150 BYTES each, no matter how big the tab is or how many tabs we have! ...yes ... you read right- just 23 tiny green colored pixels ;)

You'll find the files attached to this article in the bottom. Copy it to the directory, where the html file from part 1 has been saved.

Step 2: defining the right properties

Ok, the graphics are placed and now we need to define, what has to be done with them. This is pretty easy as we just need to change some lines in the CSS definition. Look for those listed definitions and append them in the buttom like this:
Sorry- ... please log-in or register to get this!

Try to save the html file and open it in your favourite browser. And Tadaaa- there you go! But we can still enhance this a bit aslong as we LOVE STANDARDS and use corresponding browsers ... ;)

Step 3: Mozilla, Chrome, Safari and Opera make a better web

The web consists of a set of many BOX LAYOUTS more or less nice to look at. With the mentioned browsers by time came some new stuff up: ROUNDED CORNERS. As it still is a "boxed" world, we now can define rounded corners in CSS and with that modify those boxy shapes to be even more sexy ;) Include the following in your CSS:
Sorry- ... please log-in or register to get this!

This tells the browser to round those edges with a radius of 8 pixels. The smart thing about that is, that IE will ignore it and everybody will perform on that layout. I assume this to get included as a stadard in the next CSS version. By now this is pretty fine already.
Sorry- ... please log-in or register to get this!
Anyway- just save it and reload the html file and there you go!

Have fun with this and a nice weekend to you all!


730 view(s) / 2010-03-12 21:18:50 / LAST UPDATED: 2011-07-13 16:09:49