StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There isn't any super simple standardized way to set web type on a circle (or any kind of curve). But it can be done! We'll explore one way to do it here. But be forewarned, we're going to use some CSS3 and JavaScript and not give two hoots about older browsers that don't support some of the required tech. If you're interested in this for a real project, this kind of thing is probably still best served by and image with proper alt text, or proper feature detection which can flip out the image for this fancy technique in browsers that can handle it. <strong><em>Thanks to the css-tricks.com</em></strong></p> <p><a href="http://css-tricks.com/examples/TypeOnCircle/" rel="nofollow">DEMO</a></p> <p><a href="http://css-tricks.com/examples/TypeOnCircle.zip" rel="nofollow">DOWNLOAD FILES</a></p> <p><a href="http://css-tricks.com/set-text-on-a-circle/" rel="nofollow">DOCUMENTATION</a> </p> <p><strong>HTML</strong></p> <pre><code><h1> <span class="char1">E</span> <span class="char2">s</span> <span class="char3">t</span> <span class="char4">a</span> <span class="char5">b</span>  </h1> </code></pre> <p>CSS</p> <pre><code>h1 span { font: 26px Monaco, MonoSpace; height: 200px; position: absolute; width: 20px; left: 0; top: 0; transform-origin: bottom center; } .char1 { transform: rotate(6deg); } .char2 { transform: rotate(12deg); } .char3 { transform: rotate(18deg); } /* and so on */ </code></pre> <p><strong>THERE IS A SUPER DEMO GIVE FROM THE</strong> <a href="http://codepen.io/chriscoyier/pen/simple_circle_text_example/" rel="nofollow">HERE</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload