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

enter image description here

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!

  • Is IE5 really even worth worrying about these days? – Philip Regan Jul 14 '11 at 1:15
  • I can only guess that he meant to type IE6, as that browser is much more common yet doesn't support CSS3. – citelao Jul 14 '11 at 2:04
  • Yeah, I ment IE6. – Eustace Jul 14 '11 at 6:24
  • 10.7% of the world uses IE6. Just thought that was an interesting tidbit. – Hanna Jul 14 '11 at 7:26
  • also some mayor websites all over the world do not support IE6 in their code... they simply dropped it. Even microsoft did. – Luuk Jul 15 '11 at 7:54

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.

| improve this answer | |
  • no problem, glad i could help out. – Luuk Jul 18 '11 at 8:37

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.

| improve this answer | |

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.

| improve this answer | |
  • Just realized you have the "some link" part, and the facebook/twitter parts. My answer is regarding the "some link" part specifically. – Joel Glovier Jul 14 '11 at 12:44
  • open a separate question, please. – citelao Jul 15 '11 at 1:30
  • @citelao - open a separate question for what? – Joel Glovier Jul 15 '11 at 12:54
  • Sorry, misread your comment. – citelao Jul 15 '11 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.