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

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

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

  • Circle Type.js.

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

Содержание

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

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

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

Чтобы изогнуть текст с помощью 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%;
					 }
Многострочный усеченный текст с кнопкой «Показать больше» на чистом CSS

После этого добавим базовые стили для элемента 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
Как сделать спрайт в CSS

Как сделать надпись по кругу с помощью 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 дает полный контроль над положением текста на веб-странице. Надеемся, что данное руководство оказалось полезным!

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