Оформление номера в круг с помощью CSS: подробное руководство

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

Для создания круга вокруг числа с помощью CSS, можно воспользоваться элементом div с одинаковыми значениями ширины (width) и высоты (height), для которого border-radius установлен в 50%. Выравнивание текста можно осуществить с помощью свойств text-align: center и line-height. При этом значение line-height должно быть таким же, как и высота элемента.

<div class="circle">1</div>

.circle {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  border: 2px solid black; 
}

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

Продвинутые приёмы: делаем круги CSS идеальными

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

Гибкие размеры круга

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

.circle {
  width: 2em;
  height: 2em;
  line-height: 2em;
  /* ...остальные свойства... */
}

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

Поддержка старых браузеров

В случае старых браузеров, таких как IE8, которые могут некорректно интерпретировать border-radius, можно использовать альтернативные решения. К таким может относиться, например, применение условных комментариев или предварительно созданных изображений формата .png.

Читаемость чисел

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

.circle {
  font-size: 1.2em; 
  border-radius: 50%;
  padding: 0.6em;   
  /* ...остальные свойства... */
}

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

Быстро решить задачу позволит использование заключённых в круг чисел Unicode, таких как ①, ② и так далее:

<p>Ваше число в круге: ①</p>

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

Если вы используете Bootstrap, вы можете воспользоваться классом .badge. Как применять бейджи, вы найдете в документации Bootstrap.

<span class="badge badge-pill badge-secondary">1</span>

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

Приведем пример создания CSS-кругов с помощью эмодзи:

🌍 1 – Круг, который не использует CSS
🌍 2 – Круг, созданный с помощью свойства `border-radius: 50%`
🌍 3 – Совершенный круг, созданный с использованием свойства `padding`

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

.number-circle {
  display: inline-block;
  border-radius: 50%;   
  padding: 0.5em;       
  border: 2px solid #000;
  text-align: center;
}

Следующим шагом является создание нашей галактической системы цифр:

🪐 1 🪐 2 🪐 3

Продвинутые дизайны с использованием псевдоэлементов

Для создания многомерного или дополнительного визуального эффекта вы можете использовать псевдоэлементы ::before или ::after. Не забудьте задать для content непустое значение:

.circle::before {
  content: ""; 
  position: absolute;
  top: -1em; left: -1em;
  right: -1em; bottom: -1em;
  border-radius: 50%;
  border: 2px dashed #666; 
}

Обеспечение доступности

Доступность — важный аспект каждого сайта. Используйте <span aria-hidden="true">1</span> для создания круга с числом, который будет адекватно восприниматься экранными читалками и другими вспомогательными технологиями.

Кроссбраузерная совместимость

Проверьте, как ваша работа отображается в разных браузерах. Для этого вы можете использовать такие инструменты, как BrowserStack или сервис Can I Use. Также убедитесь, что ваша разметка и стили проходят валидацию. Ваш сайт должен смотреться отлично на любом экране!

Полезные материалы

1. ::before – CSS: Cascading Style Sheets | MDN — Подробнее о псевдоэлементах ::before.
2. content – CSS: Cascading Style Sheets | MDN — Об использовании свойства content.
3. CSS border-radius property — Все, что нужно знать о свойстве border-radius.
4. How To Create Circles / Round Dots — Как создать круги в CSS.
5. javascript – Detect Safari using jQuery – Stack Overflow — Как определить браузер Safari с помощью jQuery.
6. shape-outside | Codrops — Как создавать сложные обтекаемые формы с помощью shape-outside.