Clickable stickers sticking out of a notebook

Question

I'm trying to make clickable buttons that look like they're stickers sticking out of a notebook. Here's how it looks like:

What's the best way to do this? Should each of them be PNG images with transparent backgrounds? That would work only if I rotated the images and made them small, but I'm afraid to use CSS3 for image rotation since that might not be supported in older browsers like IE5.

Also, how do I make the menu button that is on the left clickable as whole (I mean, not just the text)? Should I use an image that is positioned using position: absolute; ?

Thanks in advance!

Answer 1

This way uses CSS sprites and CSS rotation that should work on IE6 through modern browsers. It won't work on IE5 though :).

It uses CSS3Please rotation.

Answer 2

For the some link part, 2 solutions. 1. Make the whole an image and use CSS positioning (and if needed z-index) to position it. 2. Use a simple a href and give it a width + heigth and a background which is the image.

for the twitter facebook part. 1. CSS rotation as stated above. 2. If you really want it IE5/6 compatible it is a good idea to use a good ol fashion imagemap. If you use a HTML editor like lets say dreamweaver you can draw your clickable area from point to point.

Answer 3

If browser consistency and support is important to you, using a background image is one option. You could use a transparent PNG as just the background, and use the text from your markup for the content of the tab. That way you can change the content for different tabs, but the background can be reused and since it's only one background image, the browser can reuse it for each instance of the tab on the page.