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
Information
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.
Copyright
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.
