djdykes — 2012-01-28T16:35:18-05:00 — #1
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">
markbrown4 — 2012-01-28T22:16:27-05:00 — #2
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.
djdykes — 2012-01-29T04:44:53-05:00 — #3
Awesome that looks exactly what I need... I'll give it a whirl thanks!
paulob — 2012-01-29T13:24:53-05:00 — #4
There's some nice CSS3 demos on that main Site Mark Some of the image galleries are amazing.