Tworzenie iluzji zakrzywionej siatki

Ciekawa analiza sposobów odtworzenia iluzji optycznej za pomocą CSS.

Adam Argyle

W tym poście trochę się zabawimy. Istnieje 100 sposobów na osiągnięcie tego efektu, a ja podzielę się z Tobą tylko moimi przemyśleniami, ale zachęcam Cię do wypróbowania własnego stylu. Wypróbuj wersję demo i wyświetl kod źródłowy.

Jeśli wolisz film, obejrzyj tę wersję posta w YouTube:

Przegląd

Ta iluzja optyczna to iluzja ściany kawiarni. Nie ma tam żadnych krzywych linii, ale nasze oczy widzą nachylenia. Może być trudno w to uwierzyć, ale odbudowanie go z pewnością pomoże Ci przejrzeć iluzję.

Znacznik

Kod HTML w tym przypadku to proste wiersze i kolumny. <body> to kontener z <div class="row"> dla dzieci. 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 CSS grid, ponieważ wydawał się odpowiedni ze względu na styl prezentacji w wierszach, a także zawierał justify-content, co wydawało mi się dobrym sposobem na przesunięcie elementów podrzędnych wiersza.

Typy nadwozia

Zaczynając od stylów treści, użyłem elementów display: grid i grid-auto-rows, aby określić układy wierszy. Symbol calc(), który widzisz w przypadku rozmiarów wierszy, uwzględnia obramowanie każdego wiersza i pomaga dopasować efekt do całego widocznego obszaru.

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

Style wierszy

Ponownie wybrałem siatkę, ale zamiast tworzyć wiersze, użyłem grid-auto-flow: column, aby zmienić kierunek na kolumny. Następnie określam rozmiary kolumn i dodaję do wiersza niewielki wewnętrzny odstęp, aby pola nie stykały się z krawędzią obszaru widocznego. Następnie wybieram określone wiersze i wyrównuję treść do center lub end, tworząc przesunięcie, które wywołuje 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

Teraz, gdy wiesz, jak to zrobiłem, jak Ty byś to zrobił? 🙂 Pływaki? Flexbox? Gradient?!

Urozmaićmy nasze podejście i poznajmy wszystkie sposoby tworzenia treści w internecie.

Utwórz demo, wyślij mi na Twitterze linki, a ja dodam je do sekcji remiksów społeczności poniżej.

Remiksy społeczności