Текст по кругу посредством css

Часто для уникальности и красоты сайта дизайнеры придумывают разные декоративные украшения, трансформирование текста. И важная задача верстальщика при этом сделать все как можно правильнее — сделать все что можно посредством html и css не используя картинки.

Самый легкий способ решения данной задачи — воспользоваться каким — либо графическим редактором. Это не составит большого труда. При этом Вы получаете отсутствие проблем с кроссбраузерностью. Но есть ряд недостатков такого метода:

• не возможно скопировать текстовую информацию;
• сложность внесения исправлений в текст и его параметры;
• повышается трафик на сервере данного сайта
• увеличение количества обращений к серверу при обновлении страницы

В виду всех этих нюансов наиболее правильным решением все же будет использование html и css.

Допустим у нас задача написать по кругу сверху «Привет», а снизу

Создадим адаптивный круг (div с классом “disk”), вокруг которого будет располагаться наш текст.

Html:

<div>
</div>

Css:

.disk {
  position: relative; 
  background: #4a9266;
  width: 30%;
  padding: 15% 0; border-radius: 50%;  /* адаптивный круг */
  margin: 10% auto;
  font: 4.5vmin monospace; 
}

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

Html:

<div>
  <b>П</b>
  <b>р</b>
  <b>и</b>
  <b>в</b>
  <b>е</b>
  <b>т</b>
 
  <b>м</b>
  <b>и</b>
  <b>р</b>
</div>

Css:

.disk b {
  position: absolute;
  left: 50%; /* все буквы ставим в одну точку*/
  width: 0; /* убираем отступ */
}

Строку, которая будет сверху круга («Привет»), позиционируем

.disk b:nth-of-type(-n+6) {
  bottom: 50%; /* отступ от центра по радиусу */
  -ms-transform-origin: 0% 100%; 
  -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%;
  padding-bottom: 50%; /* отступ от центра круга */
}

Где 6 – это количество букв в текущей части текста.

Далее позиционируем каждую букву отдельно, поворачивая ее на определенное количество градусов. Так как размер шрифта у нас 4,5 %. Пусть на каждый символ у нас приходится

Очень важно проставляя поворот каждой букве учесть пробел между словами, если он есть. Как символ мы его не считаем, но пропустить 6 градусов для пробела в нужном месте нужно.

Исходя из этого определяем символы которые будут в центре, ставим им поворот 3 и -3 (357) градуса и далее высчитываем. Получаем:

Css:

.disk b:nth-of-type(1) {-ms-transform: rotate(345deg); -webkit-transform: rotate(345deg); transform: rotate(345deg);} /*Укажем расположение для буквы П*/
.disk b:nth-of-type(2) {-ms-transform: rotate(351deg); -webkit-transform: rotate(351deg); transform: rotate(351deg);} /*Укажем расположение для буквы Р*/
.disk b:nth-of-type(3) {-ms-transform: rotate(357deg); -webkit-transform: rotate(357deg); transform: rotate(357deg);} /*Укажем расположение для буквы И*/
.disk b:nth-of-type(4) {-ms-transform: rotate(3deg); -webkit-transform: rotate(3deg); transform: rotate(3deg);} /*Укажем расположение для буквы В*/
.disk b:nth-of-type(5) {-ms-transform: rotate(9deg); -webkit-transform: rotate(9deg); transform: rotate(9deg);} /*Укажем расположение для буквы Е*/
.disk b:nth-of-type(6) {-ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg);} /*Укажем расположение для буквы Т*/

Затем тоже самое проделываем для нижней части. Селектор .disk b:nth-of-type(n+7) начинается с 7, поскольку в слове выше было использовано 6 букв.

/* мир */
.disk b:nth-of-type(n+7) {
  top: 50%;
  -ms-transform-origin: 50% 0; 
  -webkit-transform-origin: 50% 0; transform-origin: 50% 0;
  padding-top: 50%; /* влияет на удаление букв от средины окружности */
}
.disk b:nth-last-of-type(1) {-ms-transform: rotate(354deg); -webkit-transform: rotate(354deg); transform: rotate(354deg);} /*Укажем расположение для буквы М*/
.disk b:nth-last-of-type(2) {-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);} /*Укажем расположение для буквы И*/
.disk b:nth-last-of-type(3) {-ms-transform: rotate(6deg); -webkit-transform: rotate(6deg); transform: rotate(6deg);} /*Укажем расположение для буквы Р*/

Все готово. Если вам нужен просто текст, Вы можете сделать прозрачным круг.

Кроссбраузерность

Этот код работает во всех современных браузерах, поддерживающих html 5 и css 3.

В отличии от использования обычной картинки:

• Увеличивается скорость загрузки страницы, так как не нужно грузить дополнительную графику;
• Вы получаете возможность быстро и легко редактировать размер и цвет шрифта, радиус круга и непосредственно сам текст.

Оценок: 9 (средняя 4.4 из 5)

• 16114 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

[CSS] Установить текст в круг

Не существует сверхпростого общего метода для установки типа css на окружности (или на любой кривой).

Но это может быть сделано!

Здесь мы рассмотрим способ реализации.

Но имейте в виду, что мы будем использовать некоторые CSS3 и JavaScript, старые браузеры, которые не поддерживают определенные необходимые технологии (IE7 и т. Д.) Пожалуйста, оставьте.

Если вас интересует реальный проект, лучше всего использовать изображение с соответствующим замещающим текстом или соответствующим обнаружением функций, чтобы обеспечить лучшее решение для таких вещей. Изображение пролистывается этой техникой.

Давайте продолжим с некоторых простых вещей.

Возьмем для примера простую фразу:

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

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

Теперь давайте сделаем каждую коробку длиннее, как спицы велосипеда.

Затем связываем все эти спицы вместе так, чтобы они полностью перекрывали друг друга.

А теперь представьте, что мы прикрепляем концы этих спиц к центральной втулке. Мы поворачиваем каждую спицу только немного больше, чем последнюю.

Если мы повернем родительский элемент против часовой стрелки и удалим красную контрольную линию, на круге будет текст!

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

Lettering.js может легко сделать это за вас (зависимости jQuery и плагинов).

Итак, у вас есть это.

<h2>Established 2012</h2>

Вы загружаете jQuery и Lettering.js, а затем вызываете этот код:

$("h2").lettering();

А в DOM стало так:

<h2>
  <span>E</span>
  <span>s</span>
  <span>t</span>
  <span>a</span>
  <span>b</span>
  <!-- you get the idea -->
</h2>

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

Для каждого диапазона вы хотите установить высоту, разместить их все в одном и том же положении, а затем установить источник преобразования в нижней части поля (так, чтобы они вращались вокруг этого центра.

h2 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
}

Теперь вам понадобится набор селекторов имен классов, каждый из которых больше вращается.

.char1 { transform: rotate(6deg); }
.char2 { transform: rotate(12deg); }
.char3 { transform: rotate(18deg); }
/* and so on */

Общий код

<style>
.badge {
  position: relative;
  width: 400px;
  border-radius: 50%;
  transform: rotate(-50deg);
}

h2 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
}

.char1 {
  transform: rotate(6deg);
}

.char2 {
  transform: rotate(12deg);
}

.char3 {
  transform: rotate(18deg);
}

.char4 {
  transform: rotate(24deg);
}

.char5 {
  transform: rotate(30deg);
}

.char6 {
  transform: rotate(36deg);
}

.char7 {
  transform: rotate(42deg);
}

.char8 {
  transform: rotate(48deg);
}

.char9 {
  transform: rotate(54deg);
}

.char10 {
  transform: rotate(60deg);
}

.char11 {
  transform: rotate(66deg);
}

.char12 {
  transform: rotate(72deg);
}

.char13 {
  transform: rotate(78deg);
}

.char14 {
  transform: rotate(84deg);
}

.char15 {
  transform: rotate(90deg);
}

.char16 {
  transform: rotate(96deg);
}

.char17 {
  transform: rotate(102deg);
}

.char18 {
  transform: rotate(108deg);
}

.char19 {
  transform: rotate(114deg);
}

.char20 {
  transform: rotate(120deg);
}

.char21 {
  transform: rotate(126deg);
}

.char22 {
  transform: rotate(132deg);
}

.char23 {
  transform: rotate(138deg);
}

.char24 {
  transform: rotate(144deg);
}
</style>
<div>
        
        <div>
          <h2>Established 2012</h2>
        </div>
    
    </div>
<script>
$(function() {
        $("h2").lettering();
    });
</script>
 
 

Однако это может стать скучным и запутанным. По сравнению с Sass и Compass у него есть три преимущества:

@for $i from 1 through 100 
  .char#{$i} 
    +transform(rotate(($i*6)+deg))

Это миксин Sass (.sass) Криса Эппштейна для более расширенного миксина поворота текста:

=rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg)
  $angle-per-char: $angle-span / $num-letters;
  @for $i from 1 through $num-letters
    .char#{$i} 
      +transform(rotate($angle-offset + $angle-per-char * $i))

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

Выводим текст

Технически размещение текста по кругу — это размещение текста вдоль кривой линии.

Нам понадобятся три компонента:

• Элемент path с id, который должен располагаться в области defs
• Элемент text
• Несколько символов в textPath внутри тега text. textPath должен ссылаться на id тега path

В SVG 1.2 путь представлен тегом path и вы не сможете разместить текст по форме круга (circle) или прямоугольника (rect). Можете воспользоваться JavaScript-конвертером, превращающим атрибуты круга в эквиваленты для элемента path.

Пробуем.

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
    <title>Red Hot Chilli Peppers Logo</title>
<defs>
    <path d="M243.2, 382.4c-74.8,   
    0-135.5-60.7-135.5-135.5s60.7-135.5,135.5-135.5s135.5, 60.7, 135.5,
    135.5 S318, 382.4, 243.2, 382.4z" />
    <style>
        text { 
            font-size: 60px;
            font-family: Franklin Gothic, sans-serif;
            font-weight: 900; 
            text-transform: uppercase;
            letter-spacing: 22px;
        }
    </style>
</defs> 
    <text dy="70" textLength="1200">
        <textPath xlink:href="#textcircle">
            Red Hot Chilli Peppers
        </textPath>
    </text>
</svg>

Пример с анимацией на Codepen

Тут следует сделать несколько замечаний. Текст для удобного чтения должен быть достаточно большим, что в свою очередь будет зависеть от того, насколько велик текст относительно размера элемента path.

Текст всегда будет начинаться в определенной точке пути, это можно настроить.

Если конец текста накладывается на начало текста, то текст будет «кусать себя за хвост», а все затронутые символы станут невидимыми. В нашем примере мы видим только часть текста «Red Hot Chilli Peppers Logo».

Текст стилизуется с помощью типографских свойств CSS, с которыми вы уже должны быть знакомы; различия только в селекторе text, свойстве цвета fill, атрибутах dy и textLength.

Атрибут textLength – в нашем случае длина окружности – используется как замена свойству letter-spacing в Firefox, с которым в этом браузере связан баг при работе с SVG.

Текст будет начинаться с того места, которое в SVG называется «отправной точкой» пути. Стартовую точку можно сместить несколькими способами. Легче всего прокрутить путь до нужной вам ориентации, т.е. и тест вместе с ним:

<path d="..." transform="rotate(90 250 250)" />

Помните, что координаты трансформации в SVG, последние две цифры относятся к viewbox, а не к самому элементу. Или же можно прокрутить круг в векторном редакторе перед экспортированием файла.

Если текст на окружности начинается слишком рано и есть место, чтобы его сдвинуть в конец, используйте startOffset. Значение данного атрибута задает стартовую точку текста и измеряется в процентах, где 0% — значение по умолчанию, а 100% (т.е. стартовая точка смещена в самый конец пути) – максимально возможное значение. Как и раньше, текст, набегающий на начало строки, становится невидимым.

В замкнутой форме может быть сложно определить стартовую точку. Один из легких способов – в Illustrator временно включить обводку пути и конечную стрелку end на панели Обводка (обратите внимание, возможно вам необходимо включить «Показывать опции» в верхнем правом углу панели). Тогда стрелка укажет на стартовую точку.

Добавить атрибут dx (или Х) к тегу text, с помощью которого можно двигать текст вдоль пути (по умолчанию значение задается в пикселях). На данный момент dx лучше всего работает в Firefox, так что рекомендуется использовать его.

Если Х или dx задать отрицательные значения, пропадут первые буквы. В Illustrator можно задать новую стартовую точку с помощью ножниц: кликните в любом месте на пути, это и будет стартовая точка, но в результате код станет немного длиннее.

Текст будет написан в том направлении, в котором нарисован путь. В SVG есть две возможные интерпретации:

Круг по часовой стрелке, тогда основания букв будут располагаться на внешнем кольце пути, т.е. буквы будут «снаружи».

Круг против часовой стрелки, тогда основания букв будут расположены на внутренней окружности пути, т.е. буквы будут внутри.

В SVG2 добавили атрибут side, который значительно упрощает настройку направления текста вдоль пути: значение side для left или right изменит направление текста. Значение side также позволяет расположить текст вокруг или внутри базовой фигуры, такой как прямоугольник и круг. Но к сожалению, на момент написания статьи ни один браузер не поддерживает данную функцию.

В дизайне логотипов очень часто можно встретить две надписи, записанные в противоположных направлениях на одной и той же кривой. Самый знакомый пример — логотип Starbucks Coffee.

Сделать такую надпись в SVG можно двумя способами:

• Использовать копию пути, но развернутого в другую сторону с новым id и ссылкой на другой текст (понадобится передвинуть символы с помощью атрибута dy)
• Если два текстовых фрагмента одного размера: использовать новый путь, который касается верхушки нижнего слова. Тогда этот путь будет базовой линией для верхнего слова (но также необходимо развернуть направление одного из путей).

В примере использован второй подход.

Пример на Codepen

Источник: the new code – Placing Text on a Circle with SVG

Вернуться в раздел SVG

Реклама

Сделать адаптивные круги с текстом с помощью CSS

Вот пример чувствительного круга, что представлен в материале, за исключением того, что добавление дополнительного класса ztumol-content где будет идеально центрировать любой контент, который мы выбираем для размещения в нашем круге, независимо от того, является ли он отзывчивым или фиксированным. Но это просто поставленный знак, для него установлен класс, но в стилях не приписано, так как все идет на саму фигуру, точнее круг, чтоб на всех экранах смотрелся корректно и безусловно не выделялся от контента.

Чтобы разделы отображались как нужно, мне нужно было начать с создания идеальных квадратов. Тогда можно использовать радиус радиуса, установленный на 50% и больше, чтобы идеально округлить секцию в круг. В старые времена я мог установить точную ширину и высоту для элементов, но это не сработало здесь. Из-за гибкого характера разделов вызова было невозможно установить для них явную ширину. Вместо этого их ширина будет зависеть от экрана, на котором они были показаны. Другая проблема, с которой я столкнулся, заключалась в том, что ширина и высота элементов вычисляются по-разному.

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

Сначала настройте свой HTML таким образом измените класс CSS renderanson на то, что описывает то, что вы установите для фона круга.

HTML

Код

<div>
  <div>ZR</div>
</div>

Код

.magesawhile-tudatasibeing {
  font-size: 93px;
  font-weight: 800;
  margin: 0 auto 19px;
  width: 37%;
}
.magesawhile-tudatasibeing::after {
  border-radius: 50%;
  content: «»;
  display: block;
  height: 0;
  margin-bottom: 20px;
  padding-bottom: 100%;
  width: 100%;
}
.magesawhile-tudatasibeing div {
  color: #f1eded;
  float: left;
  line-height: 1em;
  margin-top: -0.4em;
  padding-top: 49%;
  text-align: center;
  width: 99%;
}

Код

.renderanson::after {
  background: url(«http://zornet.ru/ABVUN/sarunolas/zornet/kotas/kartinka-zornet.jpg») repeat scroll 0 0 / cover ;
}

В демонстраций будет представлено несколько вариантов, где один из которых представлен здесь. По сути они по конструкций идентичны, но где то можно поставить изображение, где то идет без него, что в стилях его отдельно вывел.

Демонстрация

border-radius — CSS | MDN

border-radius — это CSS-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закруглённость каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.

Это свойство является короткой записью для четырёх свойств border-top-left-radius (en-US), border-top-right-radius (en-US), border-bottom-right-radius (en-US) иborder-bottom-left-radius (en-US).

Скругление применяется ко всему background, даже если элемент не имеет границ, точное положение отсечения определяется свойством background-clip.

Свойство border-radius не применяется к элементам таблицы, когда свойство border-collapse (en-US) имеет значение collapse.

Замечание: Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в border-radius:0 0 inherit inherit, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.

border-radius: 10px;


border-radius: 10px 5%;


border-radius: 2px 4px 2px;


border-radius: 1px 0 3px 4px;



border-radius: 10px 5% / 20px;


border-radius: 10px 5% / 20px 30px;


border-radius: 10px 5px 2em / 20px 25px 30%;


border-radius: 10px 5% / 20px 25em 30px 35em;


border-radius: inherit;
border-radius: initial;
border-radius: unset;

Свойство border-radius может быть задано как:

• одно, два, три или четыре значения <length> или <percentage>. Используется для задания обычного радиуса углов.
• одна, две, три или четыре пары значений <length> or <percentage>, разделённые «/». Используется для задания эллиптического скругления.

Значения

<length>

Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.

<percentage>

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

Например:

border-radius: 1em/5em;


border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;


border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

Формальный синтаксис

  border: solid 10px;
  /* угол изгибается в виде 'D' */
  border-radius: 10px 40px 40px 10px;

  border: groove 1em red;
  border-radius: 2em;

  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;

  border: none;
  border-radius: 40px 10px;

  border: none;
  border-radius: 50%;

  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;

  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;

BCD tables only load in the browser

① — Цифра один в круге: U+2460

Значение символа

Цифра один в круге. Обрамлённые буквы и цифры.

Символ «Цифра один в круге» был утвержден как часть Юникода версии 1.1 в 1993 г.

Свойства

Похожие символы

Кодировка

Урок 02. Иcкривляем текст в CorelDraw (Fit Text to Path, CorelDRAW, Envelope, текст дугой, аркой, по кругу)

У Вас есть текс и Вы хотите преобразить его? Допустим, Вы решили сделать надпись на круглом или изогнутом объекте. Вы не знаете как это сделать? Чуть ниже Вы сможете найти все ответы.

Оглавление

1. Первый способ (искривление вокруг объекта)
2. Второй способ (искривление формы текста)

Искривлять текст можно несколькими способами. Я расскажу о двух. Для начала нужно определиться, какого рода искривление вам нужно, хотите ли вы обогнуть объект текстом или же искривить сам текст, для того, чтобы он смотрелся нестандартно.

Первый способ (искривление вокруг объекта)

1.1 Рисуем любой объект. Это может быть круг, квадрат, овал, просто изогнутая линия. Это может быть любая кривая Безье, но это должен быть простой объект. Он не должен содержать сложных элементов.

Создаем для примера треугольник. В панели инструментов слева выбираем кнопку Basic Shapes. Вверху появится меню этого инструмента. Кликаем на кнопку Perfect Shapes. В выпадающем меню выбираем интересующий нас объект: в нашем случае — это треугольник.

1.2 Теперь повернем наш треугольник так, как нам будет удобнее с ним работать. Инструментом Pick Tool в левой панели кликаем один раз на наш треугольник и поворачиваем его. Также это можно сделать при помощи инструментов Angle of Rotation Mirror

1.3 Теперь выбираем кнопку текста Text Tool и пишем любое предложение.

1.4 У нас есть текст и есть объект. Теперь мы можем «обогнуть» текст вокруг нашего треугольника. Для этого мы кликаем на наш текст и идем в верхнее меню (Text > Fit Text to Path).

1.4a Вместо курсора появляется стрелочка, которой мы должны указать место, которое мы хотим обогнуть.

1.5 Для того, чтобы изменить или подправить полученный результат, используем инструмент Shape Tool. Если мы хотим сдвинуть или переместить текст выше или внутрь объекта, то мы должны использовать инструмент Pick Tool. Двигая за красный ромбик около текста, мы можем перемещать его.

1.5a Так же мы получаем полный доступ к панели управления текстом.

1.6 Если мы хотим оставить только искривлённый текст, а объект, который он огибает, убрать, то мы должны кликнуть на наш «рисунок» и открыть в меню (Arrange > Break Text Apart)

1.6a Затем отменяем выделение нашего объекта и берём отдельно только текст.

Мы получили готовый нужный нам текст.

Результаты могут быть и такими. Всё зависит от поставленной Вами цели.

Второй способ (искривление формы текста)

Бывает нужно искривить сам тест, а не его угол, радиус или направление. Во втором способе мы изменим форму теста.

2.1. Создаем текст (пункт. 1.3). В панели инструментов слева выбираем кнопку Interactive Envelope Tool.

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

При этом текст всегда остаётся текстом, т.е. вы всегда можете написать другое предложение или слово.

Удачи в обучении 🙂

Как добавить круг вокруг числа в CSS

Добавить круг вокруг числа можно легко с помощью CSS. Это можно сделать с помощью свойства border-radius.

В этом фрагменте вы также можете найти способ добавления круга вокруг чисел, содержащих от одной до четырех цифр.

Теперь мы покажем процесс пошагово.

Создать HTML¶

• Создайте
  с именем класса «circle» внутри.
• Поместите число внутри этого
  .

  

  
    
  
  
    
 1 
 
  

Добавьте CSS¶

• Установите радиус границы на« 50% ».
• Укажите ширину и высоту элемента.
• Стилизуйте класс, используя свойства фона, границы и цвета.
• Центрируйте число, используя значение «center» свойства text-align.
• Укажите шрифт номера.

  .circle {
  радиус границы: 50%;
  ширина: 34 пикс;
  высота: 34 пикс;
  отступ: 10 пикселей;
  фон: #fff;
  граница: 3px solid # 000;
  цвет: # 000;
  выравнивание текста: центр;
  шрифт: 32px Arial, без засечек;
}  

Теперь мы можем увидеть пример полностью.

Пример добавления круга вокруг числа: ¶

  

  
    
    <стиль>
      .круг {
        радиус границы: 50%;
        ширина: 34 пикс;
        высота: 34 пикс;
        отступ: 10 пикселей;
        фон: #fff;
        граница: 3px solid # 000;
        цвет: # 000;
        выравнивание текста: центр;
        шрифт: 32px Arial, без засечек;
      }
    
  
  
    
 1 
  
  

Результат¶

Далее мы покажем пример, в котором мы используем кружки вокруг чисел, состоящих из одной-четырех цифр.Этот пример можно использовать для любого количества текста и круга любого размера.

Здесь мы будем использовать свойство line-height. Обратите внимание, что свойства width и line-height должны иметь одно и то же значение.

Пример добавления круга вокруг чисел от одной до четырех цифр: ¶

  

  
    
    <стиль>
      .круг {
        ширина: 120 пикселей;
        высота строки: 120 пикселей;
        радиус границы: 50%;
        выравнивание текста: центр;
        размер шрифта: 32 пикселя;
        граница: 3px solid # 000;
      }
    
  
  
    
 1 
    
 100 
    
 10000 
    
 1000000 
  
  

В нашем последнем примере мы используем префиксы -moz- и -webkit- со свойством border-radius.Здесь мы также используем свойство display, для которого установлено значение «inline-block», чтобы представить элемент как контейнер блока встроенного уровня.

Пример добавления круга вокруг числа с использованием свойства line-height: ¶

  

  
    
    <стиль>
      span.circle {
        фон: # e3e3e3;
        радиус границы: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        цвет: # 6e6e6e;
        дисплей: встроенный блок;
        font-weight: жирный;
        высота строки: 40 пикселей;
        маржа справа: 5 пикселей;
        выравнивание текста: центр;
        ширина: 40 пикселей;
      }
    
  
  
     1 
  
  

Как создать круговой / изогнутый текст с помощью JavaScript

Создание кругового текста или текста по изогнутой траектории на веб-страницах может показаться довольно сложной задачей.На самом деле нет простого способа добиться этого с помощью стандартных HTML и CSS. Есть один или два плагина JavaScript с довольно приличными результатами, но использование плагинов означает дополнительную зависимость и время загрузки, связанное с вашим проектом. Так что ты можешь сделать? С небольшим количеством простого старого ванильного JavaScript и стандартного CSS на самом деле не так уж и сложно создать собственный изогнутый текст! В этой статье я покажу вам, как создать круглый / изогнутый текст, используя всего 15 строк JavaScript.Результат является функциональным и многоразовым, так что вы можете применить к своим проектам столько кругового текста, сколько захотите! Вам не понадобятся какие-либо специальные библиотеки или плагины; просто старый добрый HTML, CSS и JavaScript. Я буду приводить примеры по ходу дела и предлагать вопросы для рассмотрения по ходу дела. Обведите вагоны; Давайте начнем!

Круговой текст: HTML

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

См. Pen ALoKJJ от Develop Intelligence (@DevelopIntelligenceBoulder) на CodePen.

Круговой текст: CSS

Затем мы добавим немного CSS, чтобы все было настроено. Ни один из следующих CSS не является на самом деле необходимым, и его можно настроить по мере необходимости. Для этого урока я выбрал произвольный черный фон с белесым текстом; Я также решил центрировать целевой элемент (div с class = circTxt ), но вы можете расположить контейнеры и целевые элементы как угодно! Вот как у меня есть CSS:

См. Pen NRvNEv от Develop Intelligence (@DevelopIntelligenceBoulder) на CodePen.

Круговой текст: JavaScript

Затем идет волшебство — JavaScript. Здесь все становится немного сложнее, но общая логика на самом деле не так уж и сложна. Чтобы дать общий обзор, прежде чем на самом деле смотреть на код, вот что мы хотим выполнить:

1. Создайте многоразовую функцию с именем roundText , которая принимает 3 аргумента: 1) текст , который должен быть написан по кругу, 2) радиус круга, на котором будет лежать текст, и 3) индекс DOM целевого объекта class = circTxt element
2. Разделите текст на массив и получите его длину (т.е.д., количество символов, которые он содержит)
3. Разделите общее количество градусов в круге (т. е. 360 градусов) на длину / количество символов в тексте, чтобы определить интервал
4. Укажите исходную или начальную точку для круговой текст (для простоты я собираюсь жестко закодировать 0 градусов)
5. Создайте цикл (здесь с использованием метода forEach в массиве), который вставляет текст по периметру круга, используя определенный радиус и обновляя исходное / начальное значение как идет
6. Вызовите функцию для создания кругового / дугообразного текста!

Поняли? Поверьте, на самом деле это не так уж и сложно; менее 15 строк, пожалуйста.Вот как выглядит код:

См. Pen rrzZoK от Develop Intelligence (@DevelopIntelligenceBoulder) на CodePen.

ПРИМЕЧАНИЕ: Я действительно использую синтаксис ES6 (стрелочная функция и литерал шаблона), но код можно легко реорганизовать в соответствии с более традиционным синтаксисом.

Ну … вот и он … круговой текст с простым старым HTML, CSS и JavaScript!

Некоторые моменты, которые следует учитывать, — это необходимость настройки переданного значения радиуса в зависимости от количества символов в вашем тексте.Вообще говоря, чем больше символов у вас есть в тексте, тем больший радиус вам нужно будет использовать (однако вы можете создать некоторые изящные эффекты, используя радиус, который изначально может показаться слишком маленьким). Также обратите внимание, что вы можете создать дугообразный или изогнутый текст, не обходя полный круг, целенаправленно используя пробелы в своем тексте.

См. Pen kkobjp от Develop Intelligence (@DevelopIntelligenceBoulder) на CodePen.

Эффект дуги также может быть достигнут путем изменения значения начала координат, используемого в коде (т.е., начиная где-нибудь, кроме вершины круга). Что касается модификаций CSS, код может быть изменен на целевые элементы с указанными идентификаторами или именами тегов; вы также можете использовать метод querySelector объекта документа для достижения точного таргетинга. Кроме того, вы можете изменять как контейнеры circTxt (размещая их в любом месте на странице, задавая им высоту и ширину и т. Д.), Так и круговой текст внутри.

См. Генератор кругового текста Pen от Чейза Аллена (@ ccallen001) на CodePen.

Я призываю вас сходить с ума, проявить творческий подход, вернуться назад и повеселиться! 🙂

кругов CSS — Cloud Four

Я постоянный эксперт Cloud Four по кругам.

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

Но я открою вам секрет: здесь не так много информации.Я чувствую, что к концу этой статьи вы тоже станете экспертом.

Существует несколько методов определения динамических круговых форм в HTML и CSS, у каждого из которых есть свои плюсы и минусы. Вот несколько из тех, с которыми я экспериментировал больше всего, от самых распространенных до наименее распространенных.

Самый распространенный метод — закругление всех углов на 50% . Это самый простой в применении, и он очень широко поддерживается. Свойство border-radius также влияет на границы, тени и целевой размер касания / щелчка элемента.

Если вы хотите, чтобы круг растянулся в форму таблетки, установите border-radius на половину высоты элемента вместо 50% . Если высота неизвестна, выберите произвольно большое значение (например, 99em ).

  радиус границы: 50%  

  .circle {ширина: 50%; высота: 0; размер шрифта: 20 пикселей; цвет: #fff; выравнивание текста: центр; высота строки: 0; отступ: 25% 0; радиус границы: 50%; фон: # 09f}  

  
 Здравствуйте 
  

  .circle {width: 100px; height: 100px; border-radius: 50px; font-size: 20px; color: #fff; line-height: 100px; text-align: center; background: # 000}  

  
 Здравствуйте 
  

 .button {display: block; width: 100px; height: 100px; border-radius: 50px; font-size: 20px; color: #fff; line-height: 100px; text-align: center; background: # 000}  

   Здравствуйте!   

  .menu {display: block; width: 100px; height: 100px; border-radius: 50px; font-size: 20px; color: #fff; line-height: 100px; text-align: center; text-decoration: нет; фон: # 000} .menu: hover {color: #ccc; text-decoration: none; background: # 333}  

   Здравствуйте!   

 .стильный {дисплей: блок; ширина: 100 пикселей; высота: 100 пикселей; радиус границы: 66 пикселей; граница: 4 пикселя двойной #ccc; размер шрифта: 20 пикселей; цвет: # 666; высота строки: 100 пикселей; выравнивание текста: центр; text-decoration: none; text-shadow: 0 1px 0 #fff; background: #ddd} .stylish: hover {border: 4px double #bbb; color: #aaa; text-decoration: none; background: # e6e6e6} . 

   Здравствуйте!   

  .inset {display: block; width: 100px; height: 100px; border-radius: 50px; font-size: 20px; font-weight: bold; color: #fff; line-height: 100px; text-shadow: 0 1px 0 # 666; выравнивание текста: центр; украшение текста: нет; тень окна: 1px 1px 2px # 000; фон: #cccbbb; непрозрачность: 0.95} .inset: hover {color: #eee; text-shadow: 0 0 1px # 666; text-decoration: none; box-shadow: 0 0 4px # 222 inset; opacity: 1}  

   Здравствуйте!   

  # circle-container {width: 100px; height: 100px} .quarter {width: 50px; height: 50px} .top-left {border-top-left-radius: 50px; background: # 09f; float: left} .top-right {border-top-right-radius: 50px; background: # 666; float: right} .bottom-left {border-bottom-left-radius: 50px; background: #aaa; float: left}.нижний правый {border-bottom-right-radius: 50px; background: # 333; float: right}  

  .grad {width: 100px; height: 100px; border-radius: 50px; background: linear-gradient (to bottom, # 40b3ff, # 09f)}  

 .изменить .two {display: none} .change: hover .one {display: none} .change: hover .two {display: inline}  

    Здравствуйте   Пока :(    

  .circle {width: 100px; height: 100px; border-radius: 50px; font-size: 20px; color: #fff; line-height: 100px; text-align: center; background: # 000} .info { позиция: absolute; color: # 777; margin-left: 20px}  

  
 Позвоните нам!  123.456,7890  
  

  .round-image {
 ширина: 250 пикселей;
 высота: 250 пикселей;
 фоновое изображение: url ('https://d3iw72m71ie81c.cloudfront.net/female-20.jpeg');
 размер фона: обложка;
 дисплей: блок;
}  

  .round-image {
 ширина: 250 пикселей;
 высота: 250 пикселей;
 фоновое изображение: url ('https://d3iw72m71ie81c.cloudfront.net/female-20.jpeg');
 размер фона: обложка;
 дисплей: блок;
 радиус границы: 125 пикселей;
 -webkit-border-radius: 125 пикселей;
 -moz-border-radius: 125 пикселей;
}