Как сделать текст по кругу с помощью CSS или jQuery
Иногда на веб-страницу нужно добавить элемент с изогнутым или размещенным по кругу текстом. Например, логотип сайта. Но трансформация текста с помощью HTML и CSS может оказаться задачей не из легких. Благодаря возможностям CSS3 и jQuery это все-таки возможно.
Для реализации вам потребуется:
Просмотреть демо или скачать исходные файлы.
Как сделать текст по кругу с помощью 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;
}В демоверсии присутствует три примера (простая дуга, обратная дуга и авторадиус). Они помогут лучше разобраться с исходным кодом. В этом разделе показано, как менять положение текста и выравнивать его внутри круга.
Как сделать надпись по кругу с помощью 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 дает полный контроль над положением текста на веб-странице. Надеемся, что данное руководство оказалось полезным!