Home › Transparent Tab & Button Graphics

Let's see it in action

Fri, 06/20/2008 - 5:24pm — Brian

Here is a working example that demonstrates the basic capabilities of this method:

An Example: Choose Background:

 

The tab images above were generated on-the-fly using some source images and PHP. Scroll the container window and you can clearly see that transparency is handled very well. Create your own tabs by changing the text below and submitting.

 

 

 

1st Tab:

2nd Tab:
3rd Tab:

Some more examples...

This method is not limited to tabs.... you can also create buttons on the fly, even those pretty glass-like reflective ones above.

Mouseovers are possible as well by creating another version of the tab image for the hover state and referencing it by scope...

Active tabs in this example are taller than inactive tabs, allowing room for the highlight...

Any horizontally reflective design is especially easy to create, including concave corners like these...

The tab's text can be boxed and the more complicated visual effects removed for a simple look....


With full transparency support, background images can still be visible behind inactive tabs like these...

 

 

 

 

 


Well, you get the idea... let's move on to the PHP to see how this is accomplished.