SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist djdykes's Avatar
    Join Date
    Feb 2005
    Location
    Chester, Cheshire
    Posts
    565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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.

    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!

    Code CSS:
    <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...

    Code HTML4Strict:
    	<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>

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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/

  3. #3
    SitePoint Evangelist djdykes's Avatar
    Join Date
    Feb 2005
    Location
    Chester, Cheshire
    Posts
    565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome that looks exactly what I need... I'll give it a whirl thanks!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •