2

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!

5
  • Is IE5 really even worth worrying about these days? Commented Jul 14, 2011 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
    Commented Jul 14, 2011 at 2:04
  • Yeah, I ment IE6.
    – Eustace
    Commented Jul 14, 2011 at 6:24
  • 10.7% of the world uses IE6. Just thought that was an interesting tidbit.
    – Hanna
    Commented Jul 14, 2011 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
    Commented Jul 15, 2011 at 7:54

3 Answers 3

3

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.

0
0

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.

1
  • no problem, glad i could help out.
    – Luuk
    Commented Jul 18, 2011 at 8:37
0

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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