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?
maybe try a background image for the arrows and then animate different a:hover effects?
Yeah….pretty sure that this isn’t possible with CSS alone.
SVG or Canvas maybe…
O I got it. It’ll take me a few days to figure out probably. What do you think I should charge for this?
>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.
> Yeah….pretty sure that this isn’t possible with CSS alone.
Doable with multiple elements and CSS transforms.
>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.
Done by Ana Tudor (@thebabydino). Thank her on Twitter. :)
Awesome indeed…now add the anchor links and hover states…fugly I tell you. :)
ok…first off @hugogiraudel i love you lol second when i load that into my browser it only gives me this :
%ul.round -(1…7).each do |i| %li.slice %div.segment
no image comes up lol…. lol i just need the pic to come up so ican add the hover and anchor links and jquery to it
and as usual i know one of you is going to tell me something and im going to feel like an idiot but im so thankful for u guys im learning sooooo much lol
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.
thanks paulie d…..ok but what do i do to make this work in a normal html file?
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".