I have another tricky puzzle for you to solve. It would be challenge for you and you will help to make one nice project come true. I will briefly explain what I want from you.
Assume this sketch as a final product:
Here is grey picture with circle inside. Six buttons are placed around the circle. Each button is pointing on the circle with line. Here is button in detail:
Button consist of 3 different shapes. Inside first one will be placed icon, inside others some short text. The edge of the button should be limited by the geometry of shapes. User should know that by transformation of cursor. 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.
Also the whole menu should be scalable to fit different resolutions.
I would think for two ways of doing this buttons. First one is to make a whole button out of images, or as a second solution to make it from shapes with CSS. The lines probably should be also made as image or as CSS shape. And then everything should be assembled on top of the gray background picture using “absolute position” in CSS.
I would be glad to get any kind of solutions for this puzzle! Thank you for your time!
I assume that IE definitely should be in the list. I know that IE have same issues with CSS, but the project is aimed to reach lot of people on various platforms and devices.
The dots and lines at least should be visual links, in scaling the dots probably could travel some short distance, but don't live the circle.
all three shapes(icon, item, info) are combined in one button, witch will follow user to additional content.
My point is -even if a few things can be a little tricky- I don't see anything that would require a huge amount of CSS skills except when it comes to optimize the way you position elements on a circle (see link above).
From there, there are 2 options:
* Either you haven't started coding this, and my advice would be to do it cause I don't think anybody here will do it for you,
* Or you have started but you happen to be stuck somewhere, so the best to do would be to show us your code in order to help us help you.
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.
Dear web UI designers and developers,
I have another tricky puzzle for you to solve. It would be challenge for you and you will help to make one nice project come true. I will briefly explain what I want from you. Assume this sketch as a final product:
Here is grey picture with circle inside. Six buttons are placed around the circle. Each button is pointing on the circle with line. Here is button in detail:
Button consist of 3 different shapes. Inside first one will be placed icon, inside others some short text. The edge of the button should be limited by the geometry of shapes. User should know that by transformation of cursor. 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.
Also the whole menu should be scalable to fit different resolutions. I would think for two ways of doing this buttons. First one is to make a whole button out of images, or as a second solution to make it from shapes with CSS. The lines probably should be also made as image or as CSS shape. And then everything should be assembled on top of the gray background picture using “absolute position” in CSS.
I would be glad to get any kind of solutions for this puzzle! Thank you for your time!
Absolute positioning should be avoided IMO.
I wonder what work you have done on this so far?
mostly conceptual part )
Hmm...although it's a nice challenge there a LOT of options available.
What sort of browser support is required?
Are the dots supposed to reference something inside the circle or just visual 'links' to the circle?
Is the 'item' a link in and of itself and the 'info' section another link?
What does the whole thing look like at lower viewport sizes? Do you care?
If you are concern about putting elements along a circle, Ana Tudor did this a couple of times for StackOverflow. Here is one of them, I couldn't find the others: http://stackoverflow.com/questions/12813573/position-icons-into-circle
I assume that IE definitely should be in the list. I know that IE have same issues with CSS, but the project is aimed to reach lot of people on various platforms and devices.
The dots and lines at least should be visual links, in scaling the dots probably could travel some short distance, but don't live the circle.
all three shapes(icon, item, info) are combined in one button, witch will follow user to additional content.
thanks a lot
it should be possible to place buttons in random order somehow
Hmmm....I'm feeling used here but perhaps it's just me.
NOT going to happen.
Random doesn't exist in CSS. You would need some JavaScript.
Anyway, I really don't see where you happen to be stuck in this whole thing. Did you at least start to code something?
i'm sorry ) by saying RANDOM i mean not in circular, not like completely random ) .. i saw in example that they using rotate function..
yes.. i'm making a web site.. this is menu for one page. the link above is very useful. what about buttons?
+1
My point is -even if a few things can be a little tricky- I don't see anything that would require a huge amount of CSS skills except when it comes to optimize the way you position elements on a circle (see link above).
From there, there are 2 options:
* Either you haven't started coding this, and my advice would be to do it cause I don't think anybody here will do it for you,
* Or you have started but you happen to be stuck somewhere, so the best to do would be to show us your code in order to help us help you.
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.
Nothing hard here. 3 boxes with border-radius and background-color.
Use an icon-font.
That seems obvious.
Either you're dealing with anchor tags as wrappers, or you only have to use
cursor: pointer;.Here comes
transform: scale(1.1).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.
Media queries to the rescue!
So once again, where are you stuck?
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?
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.
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/