CSS로 착시 현상을 재현하는 방법을 재미있게 탐색해 보세요.
이 게시물에서는 재미를 느낄 것입니다! 이러한 착시 현상을 만드는 방법은 100가지가 있을 텐데, 저의 생각을 공유하지만 여러분만의 스타일을 시도해 보시길 권해 드립니다. 데모를 사용해 보고 소스를 확인하세요.
동영상을 선호한다면 이 게시물의 YouTube 버전을 참조하세요.
개요
이 환상의 이름은 Cafe Wall Illusion입니다. 어디에서도 비뚤어진 선을 찾을 수 없지만, 우리의 눈은 기울어진 것을 인식합니다. 믿기 어려울 수 있지만 재구성하면 환상을 극복하는 데 도움이 될 것입니다.
마크업
이를 위한 HTML은 단순한 행과 열입니다. <body>
는 하위 요소를 위한 <div class="row">
가 포함된 컨테이너입니다. 각 행에는 5개의 <div
class="square">
요소가 있습니다.
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
…
스타일
CSS 그리드를 선택한 이유는 행 표시 방식을 감안했을 때 잘 맞을 뿐만 아니라 행 하위 요소를 오프셋하는 좋은 방법으로 보이는 justify-content
도 포함하고 있습니다.
차체 스타일
본문 스타일부터 display: grid
및 grid-auto-rows
를 사용하여 행 레이아웃을 제공했습니다. 행 크기에 표시되는 calc()
는 각 행의 테두리를 고려하며 효과가 전체 표시 영역에 맞게 조정되는 데 도움이 됩니다.
body {
display: grid;
grid-auto-rows: calc(20vh - 4px);
gap: 4px;
background: gray;
margin: 0;
}
행 스타일
여기서 다시 그리드를 선택했지만 그리드로 행을 만드는 대신 grid-auto-flow: column
를 사용하여 방향을 열로 변경했습니다. 그런 다음 열 크기를 정의하고 행에 약간의 인라인 패딩을 추가하여 상자가 표시 영역 가장자리로 들어가지 않도록 합니다. 그런 다음 특정 행을 타겟팅하고 콘텐츠를 center
또는 end
로 정렬하여 착시 현상을 일으키는 오프셋을 만듭니다.
.row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 9vw;
padding-inline: 4vw;
gap: 10vw;
background: white;
}
.row:nth-child(even) {
justify-content: center;
}
.row:nth-child(3n) {
justify-content: end;
}
정사각형 스타일
이제 남은 작업은 사각형의 색상을 변경하고 테두리를 추가하는 것입니다.
.square {
border-inline: 4px solid gray;
background: black;
}
결론
이제 내가 어떻게 했는지 알았으니 어떻게 할 건가요? 🙂 부동 소수점 수인가요? Flexbox? 그라데이션?!
접근 방식을 다양화하고 웹에서 빌드하는 모든 방법을 알아보겠습니다.
데모를 만들고 링크를 트윗해 주세요. 그러면 아래의 커뮤니티 리믹스 섹션에 추가하겠습니다.