Как сделать круг на css
Перейти к содержимому

Как сделать круг на css

  • автор:

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

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

Скопировать код
Скопировать код

.circle

Такой подход позволит создать прочный и стилево безупречный круг, используя исключительно 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, таких как ①, ② и так далее:

Скопировать код

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

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

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

Скопировать код

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

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

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

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

Скопировать код

.number-circle

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

�� 1 �� 2 �� 3

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

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

Скопировать код

.circle::before

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

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

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

Проверьте, как ваша работа отображается в разных браузерах. Для этого вы можете использовать такие инструменты, как 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 .

Используя CSS создать круг внутри круга

НО, как вы можете видеть (в Chrome и Firefox), белый круг центрируется в верхней части белого круга. Я пробовал различные комбинации позиции: абсолютное и положение: относительно положительного эффекта.

Ron 08 июль 2016, в 16:59
Поделиться
Поделиться:

10 ответов

Вы можете делать и с позициями, но самый простой способ — flexbox :

 #blackcircle < background-color:black; color:white; width: 400px; height: 400px; border-radius:50%; text-align:center; margin: 0 auto; display: flex; align-items: center; >#whitecircle

Teuta Koraqi 08 июль 2016, в 14:27
Поделиться
Rip Internet Explorer 9
John Dvorak 08 июль 2016, в 15:11

Поскольку вы знаете размеры кругов, вы можете просто поместить их с помощью:

 position:relative; top: 155px; 
#blackcircle < background-color: black; color: white; width: 400px; height: 400px; border-radius: 50%; margin: 0 auto; >#whitecircle

Здесь другой способ использования позиционирования и полей.

#blackcircle < background-color: black; color: white; width: 400px; height: 400px; border-radius: 50%; margin: 0 auto; position:relative; >#whitecircle

j08691 08 июль 2016, в 15:32
Поделиться

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

замените верхний край поля, оставшийся с

transform: translate(-50%, -50%); 

сделает его динамичным благодаря @Magnus Buvarp

#blackcircle < background-color: black; color: white; width: 400px; height: 400px; border-radius: 50%; margin: 0 auto; position: relative; >#whitecircle

Muhammad Albarmawi 08 июль 2016, в 16:22
Поделиться

Применение position:absolute к внутреннему div и position:relative к внешнему div.

 #blackcircle < background-color:black; color:white; width: 400px; height: 400px; border-radius:50%; margin: 0 auto; position: relative; >#whitecircle

Fahad Uddin 08 июль 2016, в 16:04
Поделиться

Добавить позицию: относительная; топ: 150px; к вашему whitecircle в css

phosporus 08 июль 2016, в 15:55
Поделиться

Пока вы знаете ширину и высоту #whitecircle , вы можете установить ее в позиции absolute и relative для нее родительской. затем дайте #whitecircle left top 50% и вычтите половину его ширины ширины.

top: calc(50% - (90px / 2)); left: calc(50% - (90px / 2)); 
#blackcircle < background-color: black; color: white; width: 400px; height: 400px; border-radius: 50%; margin: 0 auto; position: relative >#whitecircle < background-color: white; color: black; width: 90px; height: 90px; border-radius: 50%; margin: 0 auto; position: absolute; top:calc(50% - (90px / 2)); left:calc(50% - (90px / 2)); margin: 0 auto; >

user6213434 08 июль 2016, в 15:35
Поделиться

Быстрое решение — установить position в relative и установить left и top на 50%, установив transform в translateX(-50%) translateY(-50%) . Добавьте префиксы, чтобы обеспечить широкую совместимость.

#blackcircle < background-color: black; color: white; width: 400px; height: 400px; border-radius: 50%; margin: 0 auto; >#whitecircle

Siavas 08 июль 2016, в 15:33
Поделиться
Вы можете написать transform: translate (-50%, -50%); и он будет применять перевод к X и Y.
JoeMecPak 08 июль 2016, в 15:58

Используйте «position: relative» для черного круга и «position: absolute» для белого круга.

#blackcircle < background-color: black; color: white; width: 400px; height: 400px; border-radius: 50%; margin: 0 auto; position: relative; >#whitecircle

Taniya 08 июль 2016, в 15:23
Поделиться

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

#blackcircle < background-color: black; color: white; width: 400px; height: 400px; border-radius: 50%; margin: 0 auto; position: relative; >#whitecircle

Надеюсь, это поможет!

JoeMecPak 08 июль 2016, в 14:52
Поделиться

Вот рабочий пример, идеально по центру:

#blackcircle < background-color: black; color: white; width: 400px; height: 400px; border-radius: 50%; margin: 0 auto; position:relative; >#whitecircle < background-color: white; color: black; width: 90px; height: 90px; border-radius: 50%; margin: 0 auto; position:absolute; top:50%; left:50%; margin-top:-45px; /* half the height */ margin-left:-45px; /* half the width */ >

Stuart 08 июль 2016, в 14:42
Поделиться

Вам следует заменить margin-top: -45px; margin-left: -45px; с transform: translate(-50%, -50%); чтобы сделать его динамичным 🙂

Magnus Buvarp 08 июль 2016, в 14:20

Ещё вопросы

  • 0 Лучшие практики для динамического создания списка элементов в jquery
  • 11 FindBugs IDEA — ClassNotFoundException com.google.wireless.android.sdk.stats.IntellijIndexingStats
  • 1 Python — динамически изменять количество аргументов
  • 1 Как написать модульные тесты для методов, которые сжимают и распаковывают?
  • 1 Верните одноэкземплярное действие обратно с помощью уведомления
  • 1 Сборка приложения Flutter не выполняется, нужна помощь для устранения зависимостей
  • 0 hasClass не работает
  • 0 Combobox не применяется в поле выбора
  • 1 Использование Sinon для чтения сообщений консоли в Mocha
  • 0 Laravel PHP: обновленный файл интерфейса репозитория не распознается
  • 0 Сам триггерный элемент JQuery в привязке
  • 1 Соедините 2 отношения внешнего ключа в одном объекте в запросе
  • 1 BitArray И операция
  • 0 почему ссылки cdn ставятся внизу индексного файла
  • 0 Ошибка проверки JQuery при проверке названия отдела
  • 0 Результат запроса MySQL: что означает показанное время?
  • 0 Обработчики событий не запускаются
  • 1 Python3.5, Win32gui, Tkinter. Я не могу получить пиксель с экрана
  • 1 Недоступный файл
  • 1 Почему мои данные не маскируются?
  • 0 Если URL совпадает в ссылке и окне, добавьте класс
  • 1 Android-байт-код JAVA отсутствует после обновления инструментов Gradle и Build
  • 0 Создание собственного векторного класса, много ошибок
  • 1 отключить сортируемую функцию mootools без редактирования оригинала
  • 1 Как применить Interceptor в python?
  • 0 У меня ошибка LNK2019: нерешенная внешняя ошибка символа (небольшой код для просмотра)
  • 1 Фильтрация ботов и пауков для рекламной системы. Блокировка зашла слишком далеко
  • 0 Трансляция между службами
  • 1 Как я могу инициализировать мой RelativeLayoutButton вне метода onCreate?
  • 0 cmake, уточнение по include_directories
  • 1 Сортировка Мульти Индекса в Пандах по-разному для каждого уровня
  • 1 Как можно нарисовать гауссиан отдельно от примерки в питоне?
  • 1 Скомпилируйте javacode из запущенной java-сборки — в системе, в которой не установлен JDK
  • 1 Razor и ASP.NET: правильный способ проверить, существует ли запись и использовать ее поля?
  • 0 Tumblr фотосет, блокирующий HTML
  • 0 CSS3 переход в списке игнорируется
  • 1 Как передать несколько аргументов из фрейма данных pandas в функцию и вернуть результат в фрейм данных в определенных местах в фрейме данных
  • 0 Шаблонный класс C ++ с пользовательским поведением для контейнеров против примитивных типов?
  • 0 Ошибка при загрузке изображения: вызов функции-члена guessExtension
  • 1 Преобразовать ад обратного вызова в отложенный объект
  • 1 java.lang.NullPointerException: попытка чтения из поля ‘android.view.View android.support.v7.widget.RecyclerView $ ViewHolder.itemView’
  • 0 Как показать содержимое файла журнала в новом окне, когда мы нажимаем на ссылку весной mvc
  • 1 подписка на изменения свойств в View throws ArgumentNullException
  • 0 Как вставить вывод сложной команды терминала linux в таблицу базы данных mysql
  • 0 Twig не может создать каталог кеша
  • 0 Диалог JQuery «Закрыть»
  • 1 Как читать ObjectInputStream без знания того, что было сериализовано?
  • 0 PHP строка для разделения массива
  • 1 Не удается загрузить модуль Rampart в клиентском проекте Axis2

Как сделать круги с помощью CSS3

Рекомендую этот хостинг в Украине. Всё очень доступно, цены низкие, и лояльная тех поддержка.

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

В общем давайте, непосредственно, перейдём к практике, но для начала давайте рассмотрим некоторые важные моменты.

Важные моменты

Во всех случаях мы будем использовать следующее:

-webkit-border-radius — для правильного отображения в браузерах таких как Chrome и Safari.

-moz-border-radius — для правильного отображения кругов в браузере Firefox.

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

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

Как сделать адаптивный круг на CSS?

Иногда, при создании адаптивных сайтов, возникает необходимость придать адаптивности круглым блокам. С изображениями проблем, конечно же не возникает. Но блоки… Особенно, если внутри есть какой-то контент. А если вы не знаете сколько и какой контент будет внутри, то это становится настоящей головной болью. Обычно большинство прибегает к помощи javascript. Вычисляют ширину, присваивают высоту. Но на самом деле с помощью небольшого трюка можно легко сделать круги адаптивными на CSS. Сейчас я расскажу как.

Для начала рассмотрим html-структуру:

Что же нам нужно сделать? Оформим блоки стилями:

.circle

Теперь основное: дочернему элементу указываем высоту в ноль пикселей, а саму высоту формируем padding-ом:

.circle p

Последнее, что осталось, — выровнять контент:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *