비뚤어진 그리드 착시 현상 만들기

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? 그라데이션?!

접근 방식을 다양화하고 웹에서 빌드하는 모든 방법을 알아보겠습니다.

데모를 만들고 링크를 트윗해 주세요. 그러면 아래의 커뮤니티 리믹스 섹션에 추가하겠습니다.

커뮤니티 리믹스