Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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!

share|improve this question
    
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. –  Johannes 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
add comment

3 Answers

up vote 0 down vote accepted

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.

share|improve this answer
    
Thank you, both problems solved :) –  Eustace Jul 17 '11 at 21:48
    
no problem, glad i could help out. –  Luuk Jul 18 '11 at 8:37
add comment

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.

share|improve this answer
    
Thank you, problem solved :) –  Eustace Jul 14 '11 at 6:25
add comment

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.

share|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
    
Thank you for your answer, I will. –  Eustace Jul 15 '11 at 7:55
    
@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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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