Создание иллюзии кривой сетки

Забавное исследование способов воссоздания оптической иллюзии с помощью CSS.

Адам Аргайл

В этом посте мы немного повеселимся! Существует, наверное, сотня способов добиться этой оптической иллюзии, и я просто поделюсь с вами своими мыслями, но рекомендую вам попробовать свой собственный стиль. Попробуйте демо и посмотрите исходный код .

Если вы предпочитаете видео, вот версия этого поста на YouTube:

Обзор

Название этой иллюзии — « Иллюзия кафе-стены» . Здесь нет никаких кривых линий, но наши глаза воспринимают наклонные линии. В это может быть трудно поверить, но воссоздание этой иллюзии определённо поможет вам увидеть её насквозь.

Разметка

HTML-код для этого элемента состоит из простых строк и столбцов. <body> — это контейнер с <div class="row"> для дочерних элементов. Каждая строка содержит пять элементов <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 Grid, потому что он показался мне подходящим, учитывая стиль представления строк, а также в нем есть justify-content , что показалось мне хорошим способом сместить дочерние элементы строк.

Стили кузова

Начав со стилей body, я использовал 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? Градиент?!

Давайте разнообразим наши подходы и изучим все способы развития в Интернете.

Создайте демо, пришлите мне ссылку в Твиттер , и я добавлю ее в раздел ремиксов сообщества ниже!

Ремиксы сообщества