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

CSS로 착시 현상을 재현하는 방법을 재미있게 살펴봅니다.

Adam Argyle

이 게시물에서는 재미있는 내용을 다루겠습니다. 이 착시 현상을 만드는 방법은 100가지가 넘을 텐데, 저는 제 생각만 공유할 테니 여러분의 스타일을 시도해 보세요. 데모를 사용해 보고 소스를 확인하세요.

동영상을 선호하는 경우 이 게시물의 YouTube 버전을 확인하세요.

개요

이 착시의 이름은 카페 벽 착시입니다. 어디에도 구부러진 선은 없지만 우리 눈에는 기울어져 보입니다. 믿기 어려울 수도 있지만, 다시 만들면 착시를 확실히 파악하는 데 도움이 됩니다.

마크업

이 HTML은 간단한 행과 열로 구성됩니다. <body>는 자녀를 위한 <div class="row">이 있는 컨테이너입니다. 각 행에는 <div class="square"> 요소가 5개 포함되어 있습니다.

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

다양한 접근 방식을 사용하고 웹에서 빌드하는 모든 방법을 알아보세요.

데모를 만들고 트윗으로 링크를 보내주세요. 아래 커뮤니티 리믹스 섹션에 추가해 드리겠습니다.

커뮤니티 리믹스