Как с помощью css расположить текст по кругу
Поиск

Как с помощью css расположить текст по кругу

Nikel, 01.05.2019

Использование CSS3

Чтобы стало понятно, как можно выполнить эту задачу, используя только CSS3, посмотрим на рисунок ниже.

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

Во-первых, нам нужно обернуть все тексты в контейнер с идентификатором #warped, а затем поместить каждую букву в тег span. Кроме того, требуется указать  уникальный класс для каждой буквы, чтобы затем оптимизировать их позицию  с помощью CSS. Все это приведено в  HTML-коде ниже.

Теперь, чтобы правильно расположить текст, нам нужно добавить ширину и высоту в  контейнер с идентификатором warped .

Затем, чтобы упростить процесс для каждой буквы, которую мы помещаем в span, будем использовать дочерний селектор  > , чтобы выбрать все дочерние элементы класса  .w.

Для каждого элемента устанавливаем абсолютное положение, используя position:absolute, а затем применяем свойство transform-origin для изменения положения преобразованных элементов(указания координат).

Можно добавить еще какие-нибудь стили, для стилизации текста, свойства шрифта к элементу span.

Теперь зададим стили  каждому классу span, который мы добавили. Мы будем использовать свойство transform, свойство rotate. Оно будет иметь числовое значение радиуса (которое будет представлено в радианах). Это позволит повернуть текст на определенный радиус. Затем мы также зададим ему ширину, высоту и положение, используя свойства left и top. Приведем пример кода только для первой буквы:


У нас есть 3 примера (простая дуга, обратная дуга и окружность), которые дают вам базовое представление о том, как манипулировать позицией текста и размещать буквы так, чтобы они выстраивались по кругу (в статье приведен неполный код из-за его объемности, полный код вы можете увидеть в демонстрационном примере).

Демонстрационный пример

Как вы можете видеть, самостоятельно стилизовать текст, чтобы он расположился по кругу довольно сложно. Но сейчас существуют различные CSS генераторы, которые помогут это сделать в автоматическом режиме.

Например, можно посоветовать онлайн-генератор CSS Warp, который сгенерирует html и css в считанные секунды.

Здесь не так много параметров, которые нужно ввести. Текст, который мы будем подвергать трансформации, форма искривления(кривая, круг), тип, определяющий расположение букв, размер самих букв и высота строки. После того, как все изменения будут сделаны, нажимаем Generate html и получаем готовый код.

Использование javaScript

Чтобы закруглить текст  с помощью javaScript,  будем использовать плагин под названием circletype.js. Скачать его можно с GitHub по этому адресу

Обратите внимание, что circletype.js написан на чистом яваскрипте без использования jQuery, поэтому подключать его не нужно.

А наш плагин мы подключим в разделе head, не забывая прописать правильный путь к файлу на сервере.

Простая Дуга

Создадим для нашего текста небольшой симпатичный изгиб, радиусом 135 градусов. Тогда потребуется написать вот такой код, который разместим также в head:

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

Теперь, когда у нас есть простая дуга, пойдем дальше и изменим направление сгиба текста. Установим радиус в 160 градусов, а затем, зададим параметр dir равным -1, текст будет изгибаться против часовой стрелки.

Круг

Теперь, когда мы сумели создать простую и обратную дугу, попробуем  поместить еще и текст вокруг круга. Получится самый простой код, нужно оставить  параметр radius пустым, а CircleType.js построит идеальную окружность и установит текст на окружности.

Демонстрационный пример

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