Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Layout for interactive infographic

  • This topic is empty.
Viewing 5 posts - 16 through 20 (of 20 total)
  • Author
    Posts
  • #124237
    Paulie_D
    Member

    >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.

    #124238
    Kitty Giraudel
    Participant

    > 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?

    #124239
    AntonioP
    Participant

    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?

    #124242
    Paulie_D
    Member

    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.

    #124244
    Kitty Giraudel
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.