Forums

Give help. Get help.

  • # June 25, 2013 at 3:46 pm

    https://docs.google.com/document/d/1N7M_nz3c8xv42XXYXc_1xmi9zJroG_C4sKVableahGE/edit?usp=sharing

    above is a picture of arrows that create a circle///but they are all touching…and i need to make each individual arrow turn into a link and also when i hover over each individual arrow i need to be able to change the color…suggestions?

    # June 25, 2013 at 4:01 pm

    maybe try a background image for the arrows and then animate different a:hover effects?

    # June 25, 2013 at 4:15 pm

    Yeah….pretty sure that this isn’t possible with CSS alone.

    SVG or Canvas maybe…

    # June 26, 2013 at 5:21 am

    >What do you think I should charge for this?

    No idea…how much do you think you can get away with?

    Frankly, I don’t see how you can charge for ‘figuring out time’…but that’s between you and the client.

    # June 26, 2013 at 7:41 am

    > Yeah….pretty sure that this isn’t possible with CSS alone.

    Doable with multiple elements and CSS transforms.

    # June 26, 2013 at 8:01 am

    >Doable with multiple elements and CSS transforms.

    Hmmm, I suppose so…in theory…but it would be fugly trying to make even one curved arrow which is also an anchor link and has a hover state.

    Assuming that the arrows are all the same, you could define that shape as an SVG ‘def’ and then re-use it and just position/transform each one until you get a circle type thing.

    # June 26, 2013 at 9:08 am

    http://codepen.io/thebabydino/pen/2950ac8b2610ce67207541736245924c

    Done by Ana Tudor (@thebabydino). Thank her on Twitter. :)

    # June 26, 2013 at 9:13 am

    awesome )))))))))

    # June 26, 2013 at 9:42 am

    Awesome indeed…now add the anchor links and hover states…fugly I tell you. :)

    # June 26, 2013 at 10:50 am

    Yes, the Codepen is written in HAML and SCSS.

    If you click on the word HAML or SCSS it will show you the HTML & CSS.

    # June 26, 2013 at 10:52 am

    Copy the HTML and CSS to the relevant files…should work.

    # June 26, 2013 at 11:04 am

    My guess is that you are copying the HAML etc and not the HTML

    How about this:http://codepen.io/Paulie-D/pen/pIgai

    # June 26, 2013 at 11:18 am

    Unless you can show us a live page…I don’t think we can help you.

    # June 26, 2013 at 11:22 am

    Which browser do you use?

    # June 26, 2013 at 11:32 am

    Works on Chrome.

Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag