I'm a PHP developer by trade but as side project I'm helping a friend update thier site.
I'm trying to recreate this image in CSS3 with some mouse over effects when each circle is hovered over.
I have mocked up the basic CSS needed for the circles, but I'm struggling to find any solution for the text to wrap nicely within...
Anyone have any ideas?
<style type="text/css" media="screen" id="circles">
border:1px #000 solid;
and the mark up...
<div id="forth" class="outer circle">
<div id="third" class="circle inner">
<div id="second" class="circle inner ">
<div id="first" class="circle center">
Hmm, it's not something that is really supported for a block of text.
There is a js solution for this, not sure if you can do a full circle..
It splits each character in the text into it's own span and the uses translate and transform to move and rotate the letters.
Awesome that looks exactly what I need... I'll give it a whirl thanks!
There's some nice CSS3 demos on that main Site Mark Some of the image galleries are amazing.
This topic is now closed. New replies are no longer allowed.