Инфографика на чистом CSS

Разработка Инфографика на чистом CSS

Нет прав для скачивания
Инфографика на чистом CSS.
Пишем код HTML:
Код:
<div class="assembly">
  <article style="--k: 0; color: #fce013;">
    <h3>step 1</h3>
    <p>Cake muffin donut chocolate cake jelly sesame wafer tart pie muffin.</p>
  </article>
  <article style="--k: 0.16666666666666666; color: #23b590;">
    <h3>step 2</h3>
    <p>Cake muffin donut chocolate cake jelly sesame wafer tart pie muffin.</p>
  </article>
  <article style="--k: 0.3333333333333333; color: #25a6dd;">
    <h3>step 3</h3>
    <p>Cake muffin donut chocolate cake jelly sesame wafer tart pie muffin.</p>
  </article>
  <article style="--k: 0.5; color: #273e8c;">
    <h3>step 4</h3>
    <p>Cake muffin donut chocolate cake jelly sesame wafer tart pie muffin.</p>
  </article>
  <article style="--k: 0.6666666666666666; color: #8d489b;">
    <h3>step 5</h3>
    <p>Cake muffin donut chocolate cake jelly sesame wafer tart pie muffin.</p>
  </article>
  <article style="--k: 0.8333333333333334; color: #ec4b99;">
    <h3>step 6</h3>
    <p>Cake muffin donut chocolate cake jelly sesame wafer tart pie muffin.</p>
  </article>
</div>
Пишем наш стиль:
Код:
* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  place-content: center;
  overflow-x: hidden;
  height: 100vh;
  background: radial-gradient(circle at 100% 0, #fefefe, #929391);
}

.assembly, article {
  transform-style: preserve-3d;
}

article {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  padding: 0.125em;
  width: 10em;
  height: 10em;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(calc(var(--k)*1turn)) translatey(calc(-0.125em - 100%)) rotate(calc(var(--k)*-1turn));
  background: linear-gradient(30deg, #fdfdfd, #bfbfbf) content-box, linear-gradient(30deg, rgba(253, 253, 253, 0.5), rgba(254, 254, 254, 0.8)) padding-box;
  font: 1em/ 1.25 trebuchet ms, verdana, arial, sans serif;
  text-align: center;
  text-shadow: 0 0 1px #000, 1px 1px #000;
}
article:before {
  box-sizing: inherit;
  position: absolute;
  top: -2.25em;
  right: -2.25em;
  bottom: -2.25em;
  left: -2.25em;
  border: solid 0.125em #fff;
  padding: 1.25em;
  border-radius: 50%;
  transform: translatez(-20px) rotate(calc(var(--k)*1turn)) rotatex(calc(var(--s, -1)*1deg));
  background: radial-gradient(#fff calc(6em - 1px), rgba(255, 255, 255, 0) 6em) currentcolor;
  --m: linear-gradient(red, red) content-box, linear-gradient(red, red) border-box;
  -webkit-mask: var(--m);
  -webkit-mask-composite: xor;
  mask: var(--m);
  mask-composite: exclude;
  content: "";
}
article:nth-child(2n):before {
  --s: 1 ;
}

h3 {
  line-height: 2;
  text-transform: uppercase;
}
Смотрим полученный результат:
45453.png
Автор
baltun
Скачиваний
0
Просмотры
730
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Похожие ресурсы
Назад
Верх Низ