CSS3 - The future now - Social Network Ring

6th March 2011

For Safari ONLY (at the moment)

7th March 2012

Now for Safari, Chrome and Firefox

8th February 2013

Updated for IE10, Firefox, Chrome, Safari and iPad etc.

copyright © stu nicholls - CSS play


Another way of displaying Social Network Icon links. The only images use in this demo are rectangular network icons. The reflections, 3D turntable and oval background are all produced using just CSS.

If you have the latest version of Safari then the above demonstration will show the power of a couple of lines of CSS styling. All the icons can be links to other pages and the speed of rotation can be easily changed.

ONLY working in Safari at the moment.

7th March 2012

This now works in the latest release of Firefox, but as can be seen, when viewed in this browser, it does not yet have the smoothness of Safari. Chrome also has a good attempt at this but still has errors in the display.

8th February 2013

Re-coded and re-styled to make this work in IE10, Firefox, Chrome, Safari and iPad etc. and to add the icon reflections in all modern browsers. Also has a 'hover' to stop the animation. Does not yet work in Opera.


You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.

Free, practical CSS menus, layouts, and examples

Soft Geometry Creative Industries

Soft Geometry Creative Industries
is a music-based design company located in Bristol UK.
I create artwork for albums, singles, posters and t-shirts.
My work is influenced by punk and post-punk poster and flyer design,
lo-fi photocopy aesthetics,
Francis Bacon and Mark Rothko.

I can provide a start to finish service with my own art and photography, put together work from images provided by yourself, and collaborate on an idea.

Follow CSS play

Facebook   Twitter   Facebook Fan Page