Подскажите, пожалуйста, как сверстать такое расположение иконок?
Если приглядеться, там по окружности (белый фон с несколькими кругами) расположены кликабельные иконки...
У меня вообще нет идей.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПодскажите, пожалуйста, как сверстать такое расположение иконок?
Если приглядеться, там по окружности (белый фон с несколькими кругами) расположены кликабельные иконки...
У меня вообще нет идей.
Добавляю новый ответ, так как приложение почти полностью переписано и не знаю какое решение больше устроит автора.
Что сделано вновь:
Все изменяемые параметры переведены в проценты для достижения полной адаптивности.
Блок окружностей, который обеспечивает круглую основу иконки с тенью
переведен в секцию <defs>
для многократного использования с помощью
команды <use>
width
и height
из шапки SVG
для
получения адаптивности <div>
, что позволит менять размеры svg
блока,
меняя проценты ширины и высоты родительского <div>
. Для настройки размера и интенсивности тени увеличивайте или уменьшайте радиусы двух окружностей относительно друг друга. Так же для этих целей, можно изменять атрибут stdDeviation="4"
фильтра
.container {
width:100%;
height:100%
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 1200" preserveAspectRatio="xMinYMin meet" >
<defs>
<filter id="dropshadow" width="130%" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="0" dy="2" result="offsetblur"/>
</filter>
<g id="icon" fill="#fff">
<circle cx="0" cy="0" r="2.5%" filter="url(#dropshadow)"/>
<circle cx="0" cy="0" r="2.7%" />
</g>
</defs>
<use xlink:href="#icon" x="120px" y="120px" />
<a xlink:href="https://yandex.ru/">
<image xlink:href="https://i.stack.imgur.com/P6Rbo.png" x="96px" y="96px" width="4%" height="4%" />
</a>
<use xlink:href="#icon" x="1000px" y="120px"/>
<a xlink:href="https://yandex.ru/">
<image xlink:href="https://i.stack.imgur.com/P6Rbo.png" x="976px" y="96px" width="4%" height="4%" />
</a>
<use xlink:href="#icon" x="530" y="200"/>
<a xlink:href="https://codepen.io/">
<image xlink:href="https://i.stack.imgur.com/oEW1L.png" x="497px" y="165px" width="5.5%" height="5.5%" />
</a>
<use xlink:href="#icon" x="310" y="148"/>
<a xlink:href="https://jsfiddle.net/">
<image xlink:href="https://i.stack.imgur.com/y06Su.png" x="280px" y="118px" width="5%" height="5%" />
</a>
<use xlink:href="#icon" x="760" y="148"/>
<a xlink:href="https://jsfiddle.net/">
<image xlink:href="https://i.stack.imgur.com/y06Su.png" x="730px" y="118px" width="5%" height="5%" />
</a>
</svg>
</div>
Для реализации тени используются две окружности, одна над другой.
К нижней окружности применен фильтр Гаусса. С помощью атрибутов
этого фильтра можно тонко отрегулировать насыщенность и положение
тени. stdDeviation="4"
dx="0" dy="2"
Я сделал, как у автора
вопроса. Если нужно что-то изменить во внешнем виде тени, меняйте эти
атрибуты и радиусы окружностей.
<image>
внутри svg файла. Это
гарантирует, что иконка и окружность с тенью не разъедутся при
изменении масштаба.<use xlink:href="#icon" x="20" y="100"/>
<image>
<image xlink:href="Safari.png" x="90px" y="170px" width="15%" height="15%" />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400">
<defs>
<filter id="dropshadow" width="130%" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="0" dy="2" result="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g id="icon">
<circle cx="100" cy="100" r="30" fill="#FFFFFF" filter="url(#dropshadow)"/>
<circle cx="100" cy="100" r="35" fill="#FFFFFF" />
</g>
<use xlink:href="#icon" x="150" y="50"/>
<image xlink:href="https://i.stack.imgur.com/P6Rbo.png" x="75px" y="76px" width="12%" height="12%" />
<use xlink:href="#icon" x="20" y="100"/>
<image xlink:href="https://i.stack.imgur.com/oEW1L.png" x="90px" y="170px" width="15%" height="15%" />
<image xlink:href="https://i.stack.imgur.com/y06Su.png" x="220px" y="120px" width="15%" height="15%" />
</svg>
Разумеется что нету определённого алгоритма как расположить эти элементы
Я показал только одну часть ибо направляю в нужное русло
Дальше по шагам ... один блок в нём потомки ...и по такому примеру и сколько нужно потомков ...
Нужное правило для этого : transform:origin(x,y,z); и правильное позиционирование
Но лучше конечно для этого применить svg
* {
margin: 0;
padding: 0;
}
.items {
width: 330px;
height: 330px;
margin: 90px auto;
border: 1px solid red;
position: relative;
border-radius: 50%;
}
.items>div {
position: absolute;
top: -20%;
left: 35%;
transform-origin: 50% 230% 0;
width: 100px;
height: 100px;
border-radius: 50%;
}
.item1 {
background: red;
transform: rotate(0deg);
}
.item2 {
background: green;
transform: rotate(-90deg);
}
.item3 {
background: blue;
transform: rotate(90deg);
}
.item4 {
background: orange;
transform: rotate(180deg);
}
<div class="items">
<div class="item1">
</div>
<div class="item2">
</div>
<div class="item3">
</div>
<div class="item4">
</div>
</div>