Как сделать текст по кругу с помощью CSS или jQuery

Иногда на веб-страницу нужно добавить элемент с изогнутым или размещенным по кругу текстом. Например, логотип сайта. Но трансформация текста с помощью HTML и CSS может оказаться задачей не из легких. Благодаря возможностям CSS3 и jQuery это все-таки возможно.

Для реализации вам потребуется:

  • Circle Type.js.

Просмотреть демо или скачать исходные файлы.

Как сделать текст по кругу с помощью CSS3 (сложный способ)

Рисунок, приведенный ниже, позволит понять, как реализовывать поставленную задачу с помощью CSS3.

Как сделать текст по кругу с помощью CSS3 (сложный способ)

Чтобы изогнуть текст с помощью CSS3, нужно разбить фразу на отдельные буквы. Это делается с помощью тегов span.

Для начала обернем текст в контейнер с ID simple_arc. Затем поместим каждую букву в тег span. Для дальнейшей настройки позиционирования в CSS используем уникальный класс для каждой буквы:

<div id="simple_arc">
               <span class='w0'>S</span>
	<span class='w1'>I</span>
	 <span class='w2'>M</span>
	 <span class='w3'>P</span>
	 <span class='w4'>L</span>
	 <span class='w5'>E</span>
	<span class='w6'> </span>
	<span class='w7'>A</span>
	 <span class='w8'>R</span>
	<span class='w9'>C</span>
              </div>

Для позиционирования текста добавим в ширину и высоту. Получается следующее:

#simple_arc {
	     display: block;
             width:306px;
             height:305px;
	}

Для каждого класса внутри всех элементов span воспользуемся селектором >. С его помощью мы выделяем все дочерние элементы созданного span-класса w вместе с порядковыми номерами. Далее используем селектор nth-of-type(n + 0), которым помечаем все элементы-потомки.

Затем задаем каждому элементу position:absolute. Положение измененных элементов корректируем с помощью свойства transform-origin.

#simple_arc>span[class^=w]:nth-of-type(n+0){
					 display:block;
					 position:absolute;
                     -moz-transform-origin:50% 100%;
					 -webkit-transform-origin:50% 100%;
					 -o-transform-origin:50% 100%;
					 -ms-transform-origin:50% 100%;
					 transform-origin:50% 100%;
					 }

После этого добавим базовые стили для элемента span:

#simple_arc span{
					 font-family:'Viga';
					 font-size:38px;
					 font-weight:regular;
					 font-style:normal;
                     line-height:0.65;
					 white-space:pre;
					 overflow:visible;
					 padding:0px;
					 }

Теперь пропишем стили для каждого добавленного span. Первым делом добавим свойство transform со значением rotate. Оно принимает числовое значение радиуса в радианах. Данное свойство поворачивает текст по кругу.

Затем устанавливаем ширину и высоту, положение элемента с помощью свойств left и top.

#simple_arc .w0 {
					 -moz-transform: rotate(-1.14rad);
					 -webkit-transform: rotate(-1.14rad);
					 -o-transform: rotate(-1.14rad);
					 -ms-transform: rotate(-1.14rad);
					 transform: rotate(-1.14rad);
                     width: 21px;
					 height: 24px;
					 left: 42.7px;
					 top: 93.95px;
					 }

В демоверсии присутствует три примера (простая дуга, обратная дуга и авторадиус). Они помогут лучше разобраться с исходным кодом. В этом разделе показано, как менять положение текста и выравнивать его внутри круга.

Как сделать текст по кругу с помощью CSS3 (сложный способ) - 2

Как сделать надпись по кругу с помощью jQuery (простой способ)

Чтобы изогнуть текст или выровнять его по кругу с помощью jQuery, нам потребуется CircleType.js. Это небольшой jQuery-плагин, позволяющий создавать элементы внутри круга.

Простая дуга

Создадим дугу с плавно изгибающимся текстом. Вот HTML код:

SIMPLE ARC

Обратите внимание, что ID равно simple_arc. Затем мы подключаем библиотеку jQuery и размещаем код, приведенный ниже, перед закрывающим тегом body. Значение радиуса равно 135. Благодаря чему текст изгибается вверх.

$('#simple_arc').circleType({radius:135});
Простая дуга

Обратная дуга

Попробуем изогнуть текст в обратную сторону. Вот HTML-код.

REVERSED ARC

Размещаем код, приведенный ниже, перед закрывающим тегом body. В данном случае радиус будет равен 160. Задаем dir -1, и текст изгибается в обратном направлении.

$('#reversed_arc').circleType({radius: 160, dir:-1});
Обратная дуга

Авторадиус

Теперь давайте изогнем текст в круг. Для этого посмотрите на  HTML-код, приведенный ниже:

AUTO RADIUS TEXT ALL OVER

Если не задавать значение радиуса, то CircleType.js самостоятельно подберет оптимальный радиус для выравнивания текста по кругу.

$('#auto_radius').circleType();
Авторадиус

Изгиб текста, его вращение и выравнивание по кругу проще выполнять с помощью jQuery. С другой стороны, CSS дает полный контроль над положением текста на веб-странице. Надеемся, что данное руководство оказалось полезным!

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, отклики, лайки, подписки, дизлайки!

ОСОльга Сайфудиноваавтор статьи «How to Bend and Set Text on a Circle With CSS»