Grow your CSS skills. Land your dream job.

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 cursor: pointer;.

    > On hover the button should zoom in a bit.

    Here comes transform: scale(1.1).

    > 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 10:57 am

    i’m not asking anyone to do anything for me, i’m just asking for advice. don’t get med guys )

    HugoGiraudel thanks for the tips!

    how to combine three different shapes in one object? or if i will put all three under one “div” they already become one object?

    # February 12, 2013 at 11:01 am

    You will need two versions of your link buttons. Left and right versions.

    It could be done with a single element & pseudo elements or a background image.

    # 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:



    Info here
    Item here

    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/

Viewing 5 posts - 16 through 20 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".