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

Вы хотите создать текст внутри круга с помощью HTML и CSS? Звучит бредово, правда?

На самом деле, нет! Благодаря свойству shape-outside и некоторым трюкам CSS это вполне возможно.

Однако такой вариант вёрстки может оказаться не самым удобным. Необходимо принимать во внимание множество разных нюансов, среди них: количество символов, количество слов, варианты начертания, размер шрифта, форматирование текста и требования к адаптивности. Здесь сложно подогнать всё под один размер. Но давайте всё-таки попытаемся это сделать.

Наша цель: отобразить элемент <blockquote> (цитату) и имя автора в круге. Также мы хотим сделать вёрстку максимально универсальной. Она не потребует каких-либо дополнительных файлов и оставит HTML- разметку без изменений.

Вот к чему мы стремимся:

Примечание: В новой версии CSS Shapes появится функция shape-inside, которая позволит использовать фигуру как «обёртку» для содержимого элемента

На момент написания этой статьи функция shape-outside не поддерживается браузерами Internet Explorer и Microsoft Edge 18 и ниже

Начнём с HTML

В конце нам в любом случае понадобится «обёртка» (элемент, который инкапсулирует другие объекты страницы), поэтому давайте используем семантический тэг <blockquote> как внутренний элемент. Содержащая его «обёртка» может быть элементом div:

<div class="quote-wrapper">
  <blockquote class="text" cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">
    <p>Experience design is the design of anything, independent of medium, or across media, with human experience as an explicit outcome, and human engagement as an explicit goal.</p>
    <footer>– Jesse James Garrett</footer>
  </blockquote>
</div>  

Мы помещаем саму цитату в тэг <p>, а имя автора в тэг <footer>. Затем создаём названия классов, которые понадобятся нам при работе с CSS.

Теперь немного базового CSS

Начнем с «обёртки», созданной с помощью элемента div. Сначала устанавливаем минимальный (адаптивный) размер квадрата со значением 300px, чтобы он вписывался в маленькие экраны. Затем придаём свойству position значение relative (позже нам это понадобится).

.quote-wrapper {
  height: 300px;
  position: relative;
  width: 300px;
}

Теперь делаем так, чтобы цитата заполнила весь блок «обёртки», и имитируем форму круга, применяя к фону функцию radial gradient (Да-да, в этом примере мы не будем использоватьborder-radius).

.text {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 128, 172, 1) 0%,
    rgba(0, 128, 172, 1) 70%,
    rgba(0, 128, 172, 0) 70.3%
  );
  height: 100%;
  width: 100%;
}

Обратите внимание, что край со значением 70% выглядит более зазубренным. Я вручную понемногу увеличивал процент и обнаружил, что края с 70.3% выглядят наиболее гладко.

Теперь немного базового CSS

Обратите внимание, край справа более гладкий, чем край слева

Теперь у нас есть основной круг. Добавьте к классу .text следующие стили:

.text {
  color: white;
  position: relative;
  margin: 0;
}

Вот что у нас получилось на данный момент:

Теперь немного базового CSS - 2

Применение CSS к тексту

Давайте для начала добавим стили абзацу:

.text p {
  font-size: 21px;
  font-style: italic;
  height: 100%;
  line-height: 1.25;
  padding: 0;
  text-align: center;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

После первоначальной публикации этой статьи многие оставили комментарии о том, что существует альтернативная техника, суть которой заключается в использовании функции radial-gradient как свойства shape-outside. Так формируется более гладкая полукруглая прямая по периметру многоугольника.

Давайте применим к цитате псевдоэлемент ::before, чтобы изменить её форму. Вот здесь нам понадобится свойство shape-outside. Мы создаём многоугольник с помощью функции polygon(), устанавливаем координаты его вершин и выравниваем по левой стороне, чтобы текст вписался в фигуру.

.text::before {
  content: "";
  float: left;
  height: 100%;
  width: 50%;
  shape-outside: polygon(
    0 0,
    98% 0,
    50% 6%,
    23.4% 17.3%,
    6% 32.6%,
    0 50%,
    6% 65.6%,
    23.4% 82.7%,
    50% 94%,
    98% 100%,
    0 100%
  );
  shape-margin: 7%;
}

Теперь давайте поменяем цвет градиентного фона на красный. Точки и соединительные линии полигонов в редакторе путей останутся голубыми. Мы меняем цвет временно для большего контраста с инструментами редактирования.

background: radial-gradient(
  ellipse at center,
  rgba(210, 20, 20, 1) 0%,
  rgba(210, 20, 20, 1) 70%,
  rgba(210, 20, 20, 0) 70.3%
);

Мне нравятся инструменты разработчика в Firefox, потому что там есть очень удобные функции, например, редактор путей для shape-outside. Кликните по фигурке многоугольника в «Инспекторе», чтобы отобразить активную фигуру в окне браузера. Большие пальцы вверх команде разработчиков Mozilla Firefox за создание такого классного интерфейса!

Применение CSS к тексту

Инструмент редактирования фигур в Firefox также можно применять к значениям clip-path и <basic-shape>.

Вот что у нас вышло на этом этапе:

Применение CSS к тексту - 2

Точки по краям фигуры появляются с помощью инструментов редактирования Firefox

Мы можем сделать то же самое с псевдоэлементом абзаца ::before. Применяем свойство shape-outside, чтобы создать такой же многоугольник, но отзеркаленный, затем выравниваем его по правой стороне.

.text p::before {
  content: "";
  float: right;
  height: 100%;
  width: 50%;
  shape-outside: polygon(
    2% 0%,
    100% 0%,
    100% 100%,
    2% 100%,
    50% 94%,
    76.6% 82.7%,
    94% 65.6%,
    100% 50%,
    94% 32.6%,
    76.6% 17.3%,
    50% 6%
    );
  shape-margin: 7%;
}

Выглядит неплохо, но куда делся футер? Он вышел за пределы элемента <blockquote> (в котором расположен круглый цветной фон), поэтому мы не можем увидеть этот белый текст на белом фоне.

Добавляем стили к футеру

Теперь мы можем добавить стили элементу <footer> и придать свойству position значение absolute, чтобы вернуть наш футер обратно в границы круга.

.quote-wrapper blockquote footer {
  bottom: 25px;
  font-size: 17px;
  font-style: italic;
  position: absolute;
  text-align: center;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
  width: 100%;
}

Опять же, вы можете поменять цвет фона на тот, который нужен вам.

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

  • font-size;
  • shape-margin (нам нужно исключить две области);
  • line-height;
  • letter-spacing;
  • font-weight;
  • font-style;
  • min-width и min-height (до размеров элемента, содержащего класс .quote-wrapper).

Добавляем кавычки для красоты

Помните гигантские кавычки на самом первом примере? Их мы и собираемся сейчас сделать.

Мы воспользуемся псевдоэлементом ::before для класса .quote-wrapper. Да, придется сильно заморочиться, чтобы он выглядел хорошо. Я обнаружил, что свойство line-height сильно влияет на положение кавычек по вертикали.

.quote-wrapper::before {
  content: "\201C";
  color: #ccc;
  font-family: sans-serif, serif;
  font-size: 270px;
  height: 82px;
  line-height: 1;
  opacity: .9;
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 1;
}

Вообще, между изогнутыми (“умными”) и прямыми ("тупыми") кавычками есть разница. Я бы посоветовал использовать изогнутые кавычки в диалогах, а прямые кавычки в программировании.

Работаем над адаптивным дизайном

Нам, пожалуй, стоит сделать нашу цитату крупнее на больших экранах. Я установил контрольную точку на 850px, но вы, возможно, захотите использовать что-то другое.

@media (min-width: 850px) {
  .quote-wrapper {
    height: 370px;
    width: 370px;
  }
  .quote-wrapper::before {
    font-size: 300px;
  }
  .text p {
    font-size: 26px;
  }
  .quote-wrapper blockquote footer {
    bottom: 32px;
  }
}

Ну, вот и всё!

Примечание: В новой версии CSS Shapes появится функция shape-inside, которая позволит использовать фигуру как «обёртку» для содержимого элемента

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

Надеюсь, эта статья мотивировала вас исследовать новые возможности вёрстки со свойством shape-outside. Теперь ждите появления функции shape-inside.

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

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

Сергей Бензенкоавтор-переводчик статьи «Using CSS to Set Text Inside a Circle»