spinning CSS 3 icons.

[simpletwist]

I’m looking for some help to find a solid resource to build some spinning CSS 3 icons. There are a bunch of tutorials online but nothing that reaches the quality or aesthetics of this example. Anyone point me in the right direction?
http://parklafun.com/

[chrisburton]

You could also do this for continuous rotation. http://codepen.io/anon/pen/thfLb

[chrisburton]

@kgscott284 Ha! You caught me in the middle of seeing how fast I could get it going.

[simpletwist]

You guys rock! Perfect.

[simpletwist]

How can I change the color while keeping the image circular?

<img src="http://www.ccsdesignhouse.com/three/wp-content/uploads/2012/09/banner_prev_arrow.png" />


how do you target the border radius so it aligns with the middle of the icon? I’ve been using this CSS:

img {

position: absolute;

cursor: pointer;

background: white;

border-radius: 30px;

}

		
	

[chrisburton]

@simpletwist The image 404’s. Can you update that?

[chrisburton]

@kgscott284 Thanks

@simpletwist Please remove any white space from the image.

[simpletwist]

@ChristopherBurton

http://www.ccsdesignhouse.com/three/wp-content/uploads/2012/09/work_prev.png

I’m trying a simpler version of an arrow. Is there a way to utilize the same arrow for forward and backwards while creating a circle around it?

[simpletwist]

<img src="//www.ccsdesignhouse.com/three/wp-content/uploads/2012/09/work_prev.png"



		
	

[simpletwist]

The 1st example also is a transparent PNG–so all whitespace was removed. The white space that I wanted to remain was the outline. The outline was a tailor style border with a simple white arrow.

[chrisburton]

@simpletwist you can keep that border. However, you had white space outside of that border that I wanted you to remove.

[simpletwist]

@ChristopherBurton
I’m Not sure what white space you referring to. I took a snapshot of the icon in Photoshop. What whitespace should I be removing?png

Thank you again for your help.

[chrisburton]

@simpletwist That border should be against the transparent box. So there shouldn’t be any space between the border and the outside of it.

[simpletwist]

@ChristopherBurton ok, so I should just crop it?

[chrisburton]

@simpletwist Just change the canvas size in Photoshop.

[Author]

Posts