Пишем нашу разметку HTML:
Пишем наш стиль:
Смотрим наш результат:
HTML:
<body style="--n: 4;">
<svg class="hid">
<symbol id="ico0" viewBox="-9 -9 98 98">
<path class="d" d="M12 50h57"></path>
<path d="M40 14h-32v42h64v-21" stroke-linejoin="round"></path>
<path class="d t" d="M52 20h17"></path>
<path d="M47 9a3 3 0 0 0-3 3v16a3 3 0 0 0 3 3h6v5l5-5h15a3 3 0 0 0 3-3v-16a3 3 0 0 0-3-3zM33 57v4M47 57v4M26 66v-1a3 3 0 0 1 3-3h22a3 3 0 0 1 3 3v1z"></path>
</symbol>
<symbol id="ico1" viewBox="-9 -9 98 98">
<path d="M8 17h64v22a6 6 0 0 1-6 6h-52a6 6 0 0 1-6-6zM8 39v28h64v-28M28 16v-4a3 3 0 0 1 3-3h18a3 3 0 0 1 3 3v4M34 10h13"></path>
<path class="d" d="M12 47v16h56v-17"></path>
<path class="d t" d="M40 38h1"></path>
<path class="t" d="M27 16h2M51 16h2"></path>
</symbol>
<symbol id="ico2" viewBox="-9 -9 98 98">
<path d="M10 33v37h60v-37M40 7l32 20v7l-32-20-32 20v-7zM32 26v10h16v-10zM40 27v8M32 69v-24h16v24"></path>
<path class="d" d="M11 63h21M49 63h21"></path>
<path class="d" d="M44 59h1" style="--s: 3;"></path>
</symbol>
<symbol id="ico3" viewBox="-9 -9 98 98">
<path class="d" d="M51 20v5"></path>
<path class="d t" d="M32 46v1M48 46v1"></path>
<path d="M22 51q0 15 15 19q3 2 6 0q15-4 15-19c4 0 2-1 4-5c1-2-2-4-4-3q1-13-7-15c-7 8-28 0-29 15c-2-1-5 1-4 3c2 4 0 5 4 5M20 42c-2-9 1-13-6-17q24-25 37-9q16 3 9 26"></path>
</symbol>
</svg>
<section style="--c0: #fd4617; --c1: #ffc445;">
<h3>orange</h3>
<p>Fruit of the citrus species Citrus aurantium</p>
<div class="ico"><a href="#">
<svg>
<use xlink:href="#ico0"></use>
</svg></a></div>
</section>
<section style="--c0: #ffaa5a; --c1: #fff05a;">
<h3>lemon</h3>
<p>A hybrid between bitter orange and citron</p>
<div class="ico"><a href="#">
<svg>
<use xlink:href="#ico1"></use>
</svg></a></div>
</section>
<section style="--c0: #96c93d; --c1: #00b09b;">
<h3>pear</h3>
<p>Enjoyed since prehistoric times.</p>
<div class="ico"><a href="#">
<svg>
<use xlink:href="#ico2"></use>
</svg></a></div>
</section>
<section style="--c0: #3da5d9; --c1: #54f2f2;">
<h3>blueberry</h3>
<p>Pale greenish, then reddish and dark purple.</p>
<div class="ico"><a href="#">
<svg>
<use xlink:href="#ico3"></use>
</svg></a></div>
</section>
</body>
CSS:
* {
margin: 0;
font: inherit;
}
.ico svg, .ico:before {
border-radius: 50%;
transform-origin: 50% 0;
transform: rotate(-8deg);
animation: osc 0.3s ease-in-out infinite alternate;
}
@keyframes osc {
to {
transform: rotate(8deg);
}
}
body {
--narr: 1;
--notnarr: calc(1 - var(--narr));
--wide: 0;
--notwide: calc(1 - var(--wide));
--nor: calc(var(--notnarr)*var(--notwide));
--or: calc(1 - var(--nor));
--sum: calc(1 + var(--narr));
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
overflow-x: hidden;
min-height: 100vh;
background: linear-gradient(to right top, #ebedec, #e3e7e6, #dbe1e0, #d3dadb, #ccd4d6);
}
body:before {
--uw: calc(var(--nor)*(100% - var(--n)*2em)/var(--n) +
var(--or)*12.5em);
position: absolute;
top: 50%;
right: 0;
left: 0;
height: calc(var(--sum)*2*var(--uw));
transform: translate(calc(var(--sum)*50%/var(--n)), -50%);
background: radial-gradient(circle at calc(50% - 1em) calc(39% - 1em), #fff calc(0.25em - 1px), rgba(255, 255, 255, 0) 0.25em), radial-gradient(circle at calc(50% + 1em) calc(39% - 1em), #fff calc(0.25em - 1px), rgba(255, 255, 255, 0) 0.25em), radial-gradient(circle at 50% 39%, #fff calc(0.625em - 1px), rgba(255, 255, 255, 0) 0.625em);
background-size: calc(50%/(2 - var(--narr))) calc(100%/(1 + var(--narr)));
clip-path: inset(0 calc(var(--sum)*25%) 0 0);
filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.2));
content: '';
}
@media (max-width: 480px) {
body:before {
display: none;
}
}
@media (min-width: 38em) {
body {
--narr: 0 ;
}
}
@media (min-width: 58em) {
body {
--wide: 1 ;
}
}
.hid {
position: absolute;
clip-path: inset(50%);
}
path {
--s: 2;
fill: none;
stroke: currentcolor;
stroke-width: var(--s);
stroke-linecap: round;
}
path.d {
stroke-dasharray: 0 calc(2*var(--s));
}
path.t {
--s: 4 ;
}
section {
display: flex;
flex-direction: column;
padding: 1em 1em;
min-width: 7.5em;
width: calc(var(--nor)*(100% - var(--n)*2em)/var(--n) + var(--or)*12.5em);
font-family: sans-serif;
text-align: center;
text-transform: uppercase;
}
h3, a {
color: var(--c0);
}
h3 {
padding: 1em 0 .5em;
font-size: calc(var(--nor)*2vw + var(--or)*1.16em);
}
p {
height: 3em;
font-size: 0.75em;
}
.ico {
order: -1;
position: relative;
margin-bottom: calc(100% + 2.875em + 2px);
border-radius: 50%;
box-shadow: inset 0 0 0 0.625em #fff, 11px 11px 12px -9px rgba(27, 14, 0, 0.28);
background: linear-gradient(135deg, var(--c0), var(--c1)) padding-box;
}
.ico a {
--sgn: 1;
box-sizing: border-box;
display: grid;
place-content: center;
padding: 50%;
width: 0;
height: 0;
border-radius: 50%;
clip-path: circle(calc(50% - 0.625em));
}
.ico a:hover {
--sgn: -1 ;
}
.ico svg {
--w: calc(100% - 4em);
box-sizing: border-box;
position: absolute;
margin: calc(-.5*var(--w));
border: solid 1em transparent;
width: var(--w);
height: var(--w);
border-radius: 50%;
box-shadow: calc(var(--sgn)*36px) 27px 11px -5px rgba(27, 14, 0, 0.16);
background: linear-gradient(135deg, #fff, #d2d2d2) border-box;
transition: 0.3s ease-out;
}
.ico:before, .ico:after {
position: absolute;
content: "";
}
.ico:before {
box-sizing: border-box;
top: calc(200% + 1px);
left: calc(50% - 1.4375em);
border: solid 0.625em transparent;
width: 2.875em;
height: 2.875em;
box-shadow: 0 0 0 2px #fff;
background: inherit;
filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.32));
}
.ico:after {
width: 0.375em;
top: calc(100% - 0.5em);
left: calc(50% - 0.5em);
border: solid 0 transparent;
border-width: 0.5em 0.3125em;
padding-top: 100%;
background: linear-gradient(#fff, #fff) padding-box, radial-gradient(circle at 50% 0.5em, #fff calc(0.5em - 1px), rgba(255, 255, 255, 0) 0.5em) border-box, radial-gradient(circle at 50% calc(100% - 0.5em), #fff calc(0.375em - 1px), rgba(255, 255, 255, 0) 0.375em) border-box;
}