Создание круга на HTML5 и CSS3 с текстом внутри

Быстрый ответ

Для создания круга с помощью CSS потребуется элемент div с одинаковыми шириной и высотой, формирующих квадрат, и свойство border-radius: 50%;, которое преобразует его в круг.

<div style="width: 50px; height: 50px; border-radius: 50%; background: blue;"></div>

Размер, форма и цвет круга регулируются изменением значений width, height и background.

Вставка текста и настройка стиля круга

Размещение текста в круге

Для того чтобы разместить текст внутри круглого блока, используйте позиционирование элементов в CSS:

<div style="width: 100px; height: 100px; border-radius: 50%; background: blue; position: relative;">
  <span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">Привет, мир!</span>
</div>

Центрирование текста достигается благодаря сочетанию свойств position: absolute; и transform: translate(-50%, -50%);.

Подробнее об этом расскажет наш спикер на видео

Настройка внешнего вида круга

Добавьте такие стили, как border, padding и display, чтобы улучшить визуальное оформление:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: blue;
  border: 2px solid violet;  /* Рамка придает изящность. Будет ошеломительно выглядеть! */
  display: inline-block;     /* Выстраивает все круги в линию. Прощай, дистанция! */
  padding: 10px;             /* Достаточно места вокруг текста. Каждому – свое пространство! */
  color: silver;             /* Цвет текста. Почему бы и нет? */
  text-align: center;        /* Горизонтальное центрирование текста. Само собой разумеющееся! */
  line-height: 80px;         /* Выбираем исходя из padding. Будет сработать как волшебство! */
}

Для улучшения читаемости и доступности установите свойства color и font-size:

.circle span {
  color: teal;            /* Цвет текста. Попробуйте бирюзовый! Он ваш выбор? */;
  font-size: 1rem;        /* Размер шрифта, который оптимизируется под различные размеры экрана! */;
}

Создание круга альтернативными способами

Создание кругов с использованием SVG

SVG отлично подходит для создания более сложных форм и добавления дополнительных визуальных деталей:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>
</svg>

Элемент <circle> в SVG предназначен для идеальных кругов.

Применение тега HTML5 canvas

Тег <canvas> прекрасно подойдёт для динамических кругов, а JavaScript станет надежным помощником:

<canvas id="canvas" width="100" height="100"></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(50, 50, 40, 0, 2 * Math.PI);  /* Дуга? Скорее корабль для кругов! */
  ctx.stroke();
</script>

Функция arc() аккуратно рисует идеальные круги на холсте canvas.

Дополнительная информация

Использование Unicode символов и пользовательских шрифтов

Символы Unicode и шрифты с глифами в виде кругов можно комбинировать с текстом для создания потрясающих дизайнов.

Совместимость с браузерами

С введением CSS3 префиксы moz и webkit стали практически не нужными. Тем не менее, проверка кода HTML5 и CSS3 на валидность и тестирование совместимости с браузерами остаются важными этапами.

Выравнивание элементов

Используйте display: inline-block; или возможности flexbox для аккуратного выравнивания ваших элементов.

Центровка текста внутри круга

Сочетание position: absolute; с vertical-align и вычисляемыми отступами или flexbox помогут аккуратно расположить текст в центре круга.

Визуализация

Представьте себе квадрат (▦). Применив border-radius, вы волшебным образом получите круг (🔵). Вот такое вот волшебство CSS!

Полезные ресурсы

1. Формы в CSS | CSS-Tricks — узнайте, как создавать круги с помощью CSS.
2. border-radius – CSS | MDN — разберитесь, как работает свойство border-radius для скругления углов.
3. CSS: Скругленные углы | w3schools — примеры использования border-radius для создания кругов.
4. Рисуем формы с помощью canvas | MDN — обучающий материал от Mozilla о создании кругов на холсте canvas.
5. Как нарисовать скругленный прямоугольник с HTML Canvas? | Stack Overflow — хотя здесь речь идет о прямоугольниках, применяемые принципы подойдут и для создания кругов на canvas.