Размещение иконок в круг вокруг элемента: HTML и CSS

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

Для упорядочивания иконок в форму круга применяется CSS с использованием свойств transform и функций rotate() и translate(). При помощи rotate() обеспечивается вращение иконок вокруг центральной точки, а translate() отвечает за их смещение от центра край круга. Для определения точного позиционирования на окружности используются тригонометрические функции синус и косинус.

Вот пример кода, демонстрирующего расположение трех иконок на круговой диаграмме:

<div class="circle-container">
  <div class="icon">Иконка1</div>
  <div class="icon">Иконка2</div>
  <div class="icon">Иконка3</div>
</div>

.circle-container { position: relative; width: 100px; height: 100px; /* Форма круга обусловлена содержимым */ }
.icon {
  position: absolute; top: 50%; left: 50%;
  transform-origin: 0 0;
  transform: translate(-50%, -50%) rotate(calc(120deg * var(--i))) translate(50px) rotate(calc(-120deg * var(--i)));
  /* Вращение, смещение, повторение. Это как танцевальный класс! */
}
.icon:nth-child(1) { --i: 0; /* Первый шаг для первой иконки */}
.icon:nth-child(2) { --i: 1; /* Продолжаем вращение */}
.icon:nth-child(3) { --i: 2; /* Не оставляем без внимания последнюю иконку */}

Значения 120deg и 50px корректируются в зависимости от общего количества иконок и выбранного радиуса. Переменная --i присваивает номер каждой иконке, равномерно расставляя их вдоль периметра круга.

Оформление круговой диаграммы

Особенности CSS: магия переменных

Использование CSS-переменных позволяет подготовить круг для размещения произвольного количества иконок. Дополнительная настройка вышеупомянутого примера для автоматического размещения иконок и избавление от необходимости корректировать rotate() для каждой из них будет выглядеть следующим образом:

.circle-container {
  --num-icons: 5; /* Зафиксируем количество иконок */
}

.icon {
  --angle: calc(360deg / var(--num-icons) * var(--i)); /* Реализуем равномерное распределение */
  transform: translate(-50%, -50%) rotate(var(--angle)) translate(50px) rotate(calc(-1 * var(--angle)));
}

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

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

Адаптивное форматирование

Для реализации адаптивного дизайна используйте относительные единицы измерения и проценты. Функция calc() поможет подобрать оптимальные размеры и расположение иконок:

.circle-container {
  width: 20%; /* Адаптивная ширина */
  padding-bottom: 20%; /* Сохранение формы круга */
}
.icon {
  width: calc(var(--circle-size) * 0.15); /* Выбор подходящего размера для иконок */
  height: calc(var(--circle-size) * 0.15); /* Единообразие размеров: высота равна ширине */
  /* Отлично справились! Пора кофе-паузы */
}

Внесите изюминку в отображение

Создание идеальных кругов с использованием border-radius

Превращайте обычные иконки в красивые круглые элементы, прибегнув к border-radius: 50%;. Чтобы они были активными и интегрированы в HTML, используйте задний фон и элементы <a>.

Псевдоэлементы на практике

Визуальный эффект усилится, а восприятие вашей работы станет более объемным, если применить такие CSS псевдоэлементы, как ::before или ::after. Это поможет создать эффект тени и объемности.

Оживим иконки при помощи JS

JavaScript для динамизации расположения

С помощью JavaScript или jQuery можно динамично менять положение иконок, их углы и объекты поведения. Чтобы показать, какого эффекта можно добиться, вот код, демонстрирующий перераспределение иконок:

const icons = document.querySelectorAll('.icon');
const updatePositions = (iconCount) => {
  icons.forEach((icon, index) => {
    const angle = 360 / iconCount * index;
    icon.style.setProperty('--angle', `${angle}deg`);
    /* И снова вращаем  */
  });
};

updatePositions(icons.length); // Запустите функцию при загрузке страницы или изменении количества иконок

Реанимация элементов в React

В React используйте хуки useRef и useEffect для работы с DOM. Так можно обновлять круговую компоновку в ответ на изменения состояний или свойств компонента.

Меняем позиционирование

Интерактивные примеры для экспериментов

Для демонстрации и экспериментов с кодом воспользуйтесь сервисами jsFiddle или CodeSandbox. Это поможет в режиме реального времени проверить макет и потренироваться в его создании.

Обеспечьте универсальность решения

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

Проверьте совместимость со старыми браузерами, добавив необходимые префиксы. Это способствует доступности и функциональности ваших решений для максимально широкой аудитории пользователей.

Плавное ухудшение

При разработке CSS нужно предусмотреть плавное ухудшение: начиная с современных возможностей, добавляйте запасные варианты для устаревших браузеров, чтобы основные функции остались работоспособными.

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

Пример расположения иконок можно ассоциировать с птицами на телефонном проводе, нарисованных в виде круга:

      😺
 🎮         🎧
    📚🕰📚
 🍕         🏀
      📱

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

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

1. position – CSS: Каскадные таблицы стилей | MDN — Основные аспекты CSS позиционирования.
2. Полное руководство по Flexbox | CSS-Tricks – CSS-Tricks — Информация о Flexbox и способах его использования для создания круговых композиций.
3. Создание круговой навигации с помощью CSS преобразований – Sara Soueidan — Погружение в создание сложной круговой навигации при помощи CSS трансформаций.
4. Построение круговой навигации с CSS преобразованиями | Codrops — Примеры реализации круговой навигации.
5. Основы CSS позиционирования – A List Apart — Введение в позиционирование элементов в CSS, которое представляет собой необходимую базу для создания круговых композиций.