Страницы

Поиск по вопросам

понедельник, 22 октября 2018 г.

Как сверстать круглый блок с иконками внутри?

Подскажите, пожалуйста, как сверстать такое расположение иконок? Если приглядеться, там по окружности (белый фон с несколькими кругами) расположены кликабельные иконки...
У меня вообще нет идей.


Ответ

Добавляю новый ответ, так как приложение почти полностью переписано и не знаю какое решение больше устроит автора.
Что сделано вновь:
Все изменяемые параметры переведены в проценты для достижения полной адаптивности. Блок окружностей, который обеспечивает круглую основу иконки с тенью переведен в секцию для многократного использования с помощью команды Упрощена формула фильтра, который размывает тень Убраны фиксированные значения widthи height из шапки SVG для получения адаптивности svg код обернут в

, что позволит менять размеры svg блока, меняя проценты ширины и высоты родительского
. Добавлены ссылки на каждую иконку Иконки распределены по всей ширине svg блока
Для настройки размера и интенсивности тени увеличивайте или уменьшайте радиусы двух окружностей относительно друг друга. Так же для этих целей, можно изменять атрибут stdDeviation="4" фильтра
.container { width:100%; height:100% }

Комментариев нет:

Отправить комментарий