Circles in CSS3 and text contained within

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.

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>

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 :slight_smile: Some of the image galleries are amazing.