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

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

Адам Аргайл

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

Если вы предпочитаете видео, вот версия этого поста на 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, потому что она показалась мне подходящей, учитывая стиль представления строк, а также содержит параметр 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;
}

Заключение

Теперь, когда вы знаете, как я это сделал, как бы вы поступили?! 🙂 Плавает? Флексбокс? Градиент?!

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

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

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