Layout for interactive infographic
# February 12, 2013 at 10:49 am
>please read the description of the problem above, the problem is not only in circular pattern of the icons.
You’re not getting it.
We’re not going to do all the work for you. You at least have to put some effort in.
Try coding something yourself….if you have trouble we’re happy to help.# February 12, 2013 at 10:49 am
> Button consist of 3 different shapes.
Nothing hard here. 3 boxes with border-radius and background-color.
> Inside first one will be placed icon, inside others some short text.
Use an icon-font.
> The edge of the button should be limited by the geometry of shapes.
That seems obvious.
> User should know that by transformation of cursor.
Either you’re dealing with anchor tags as wrappers, or you only have to use
> On hover the button should zoom in a bit.
> The line and dot preferably shouldn’t be a part of the button or background image and shouldn’t react on hover effect.
This would probably be the trickiest part. The easiest way is to use background images. You could also do it with pure CSS but it would probably be more complicated. Or you could use JS to calculate coordinates.
> Also the whole menu should be scalable to fit different resolutions.
Media queries to the rescue!
So once again, where are you stuck?# February 12, 2013 at 11:36 am
Since you want a deep browser support, my best advice would be to have a structure like this:
But as Paulie said, you can totally do it with a single element and pseudo-elements if you don’t mind about IE6 and IE7.
Edit: here is a very quick and dirty mockup: http://jsfiddle.net/nkZHq/3/
You must be logged in to reply to this topic.