Tworzenie iluzji zakrzywionej siatki

Zabawna eksploracja sposobów na odtworzenie iluzji optycznych za pomocą CSS.

Adam Argyle

Tym postem zapewnimy Ci trochę świetnej zabawy! Istnieją 100 sposobów na osiągnięcie tego złudzenia optycznego. Podzielę się z wami swoimi przemyśleniami, ale zachęcam do wypróbowania swojego stylu. Wypróbuj wersję demonstracyjną i wyświetl źródło.

Jeśli wolisz film, oto wersja tego posta na YouTube:

Przegląd

Nazwa tej iluzji to Cafe Wall Illusion. Nie ma nigdzie zakrzywionych linii, ale nasze oczy widzą skosy. Może być w tym ciężko w to uwierzyć, ale odbudowanie go na pewno pomoże dobrze patrzeć na iluzję.

Markup

Kod HTML składa się z prostych wierszy i kolumn. <body> to kontener z <div class="row"> dla elementów podrzędnych. Każdy wiersz zawiera 5 elementów <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>
…

Style

Wybrałem siatkę CSS, ponieważ wydaje się ona pasować do stylu prezentacji wierszy i zawiera też element justify-content, który wydaje się dobrym sposobem przesunięcia elementów podrzędnych wiersza.

Typy nadwozia

Zaczęliśmy od stylów treści, aby utworzyć układy wierszy za pomocą display: grid i grid-auto-rows. Wartość calc() widoczna przy rozmiarach wierszy uwzględnia obramowanie każdego wiersza, pomagając dopasować efekt do całego widocznego obszaru.

body {
  display: grid;
  grid-auto-rows: calc(20vh - 4px);
  gap: 4px;
  background: gray;
  margin: 0;
}

Style wierszy

Tutaj ponownie wybrałem siatkę, ale zamiast tworzyć z nią wiersze, użyłem funkcji grid-auto-flow: column do zmiany kierunku kolumn. Następnie określam rozmiary kolumn i dodaję do wiersza niewielkie dopełnienie, aby pola nie wpadły na krawędź widocznego obszaru. Następnie kieruję wybrane wiersze i ustawiam treść na center lub end, tworząc takie przesunięcie, które zapewnia iluzję.

.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;
}

Style kwadratowe

Teraz wystarczy zmienić kolor kwadratów i dodać obramowanie:

.square {
  border-inline: 4px solid gray;
  background: black;
}

Podsumowanie

Skoro już wiesz, jak to udało mi się osiągnąć, to jak? 🙂 Pływa? Flexbox? Gradient?!

Stwórzmy różne metody i nauczmy się wszystkiego, jak rozwijać się w internecie.

Utwórz demonstrację i udostępnię mi linki na Twitterze, a dodam ją do sekcji remiksów w ramach społeczności poniżej.

Remiksy społeczności