이 예제는 콘텐츠 요소들을 원형 레이아웃 구조로 배치한 인포그래픽 UI 디자인입니다.
각 항목이 원을 중심으로 균형 있게 분포되어 구조적인 정보 전달에 적합합니다.
마우스 오버 시 강조 효과가 적용되어 인터랙션이 필요한 홈페이지 섹션에도 활용 가능합니다.
회사 소개, 서비스 단계 설명, 프로세스 안내 등 다양한 웹 인포그래픽 활용에 적합한 예제입니다.
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Roboto:ital,wdth,wght@0,75..100,100..900;1,75..100,100..900&display=swap');
body {
display: grid;
place-content: center;
min-height: 100vh;
margin: 0;
font-family: "Lexend", "Roboto", system-ui, sans-serif;
font-size: 1.6rem;
font-weight: 200;
background-image: repeating-conic-gradient(#1f202020 0% 25%, #fefefc 0% 50%);
background-position: 0 0, 32px 32px;
background-size: 64px 64px;
background-color: #fefefc;
}
ul, li {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
li {
width: 6ch;
height: 6ch;
display: grid;
place-content: center;
padding: 1em;
}
ul {
position: relative;
--dist: 7ch;
translate:
calc(-.5 * var(--dist))
calc(-.5 * var(--dist));
}
li {
position: absolute;
--angl: sibling-index() * 360deg / var(--n);
--x: calc(cos(var(--angl))
* var(--dist));
--y: calc(sin(var(--angl))
* var(--dist));
translate: var(--x) var(--y);
color: hsl(calc(var(--angl) - 90deg)
40%
30%
);
&:before {
//so as not to rotate the content itself
content: '';
position: absolute;
z-index: -1;
inset: 0;
border: 2px solid transparent;
border-radius: 50%;
corner-shape: round round round scoop;
rotate: calc(var(--angl) - 27deg);
background:
hsl(calc(var(--angl))
70%
70%
) padding-box;
transition: .5s linear;
}
&:hover:before {
border-color: currentcolor;
}
}
