

By leaving the radius empty, CircleType.js will execute a perfect radius and will set the text on a circle. Then call this code below before the closing body tag. So to do this, set the HTML code below: AUTO RADIUS TEXT ALL OVER Now that we have tried the simple and reversed arc, let’s put some text around a circle. Now, to properly position the text, we need add width and height to our container ID simple_arc. We will also need to put a unique class to each spanned text to optimize their position later on using CSS.

First, we need to wrap all texts in a container ID named simple_arc, then, put each letter on a span tag.

We can do this by using the span tag on each single text. To give you ideas how we will implement this using only CSS3, take a look at the figure below.Īs you can see, for us to be able to do this using CSS3 only, we need to break the text apart to individual letters. Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design AssetsĭOWNLOAD NOW Resources You Will Need to Complete This Tutorial:
