Забавное исследование способов воссоздания оптической иллюзии с помощью 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;
}
Заключение
Теперь, когда вы знаете, как я это сделал, как бы вы поступили?! 🙂 Плавает? Флексбокс? Градиент?!
Давайте разнообразим наши подходы и изучим все способы разработки в Интернете.
Создайте демо, пришлите мне ссылку в Твиттере , и я добавлю ее в раздел ремиксов сообщества ниже!
Ремиксы сообщества
- Маркировка сапог градиентами: демо и код