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

2023-06-28 0 ∞

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

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

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

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

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

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

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

Начнём с HTML
Теперь немного базового CSS
Применение CSS к тексту
Добавляем стили к футеру
Добавляем кавычки для красоты
Работаем над адаптивным дизайном
Ну, вот и всё!

Начнём с 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% выглядят наиболее гладко.

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

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

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

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

Применение 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 за создание такого классного интерфейса!

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

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

Точки по краям фигуры появляются с помощью инструментов редактирования 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, чтобы создать красивый и привлекающий внимание блок с цитатой. И мы добились желаемого результата без каких-либо дополнительных файлов, оставив разметку HTML нетронутой и семантической.

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