Circles in CSS3 and text contained within

[djdykes]

Hi Guys,

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.

methodology_target.jpg

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?

Much appreciated!

<style type="text/css" media="screen" id="circles">
		.circle {
			 background-color: #FFF6BF;
			 -moz-border-radius:50%;
			 -webkit-border-radius: 50%;
			 -border-radius: 50%;
			 border:1px #000 solid;
		 	position:relative;
			margin:35.5px;
		}
 
		#forth {
			width:350px;
			height:350px;	
		}
		#third{
			width:275px;
			height:275px;
 
			background-color: #FEDFB1;
		}
 
		#second {
			width:200px;
			height:200px;
			background-color:#fff6bb;
		}
 
		#first  {
			width:100px;
			height:100px;
			background-color: #ffffcc;
			margin:50px;	
		}
	</style>

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">
					Review Learning
				</div>
			</div>
		</div>
 
	</div>

[markbrown4]

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.
http://tympanus.net/Development/Arctext/

[Paul O'B]

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.
http://tympanus.net/Development/Arctext/

There's some nice CSS3 demos on that main Site Mark Some of the image galleries are amazing.

[djdykes]

Awesome that looks exactly what I need... I'll give it a whirl thanks!