Как изогнуть и выровнять текст по кругу с помощью CSS

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

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

  • Circle Type.js.

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

При помощи 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%; }

После этого добавим базовые стили для элемента 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; }

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

Как изогнуть и выровнять текст по кругу при помощи CSS

При помощи jQuery(простой метод)

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

Простая дуга

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

SIMPLE ARC

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

$('#simple_arc').circleType({radius:135});
Как изогнуть и выровнять текст по кругу при помощи CSS

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

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

REVERSED ARC

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

$('#reversed_arc').circleType({radius: 160, dir:-1});
Как изогнуть и выровнять текст по кругу при помощи CSS

Авторадиус

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

AUTO RADIUS TEXT ALL OVER

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

$('#auto_radius').circleType();
Как изогнуть и выровнять текст по кругу при помощи CSS

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *