Tworzenie iluzji zakrzywionej siatki

Zabawne sposoby odtwarzania iluzji optycznej za pomocą CSS.

W tym poście trochę się pobawimy. Musi być 100 sposobów na stworzenie tej iluzji optycznej. Podzielę się z Tobą swoimi przemyśleniami, ale zachęcam też do spróbowania własnych rozwiązań. Wypróbuj wersję demowyświetl kod źródłowy.

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

Omówienie

Nazwa tej iluzji to Cafe Wall Illusion. Nie ma żadnych krzywych linii, ale nasze oczy postrzegają ukośne. Może być to trudne do uwierzenia, ale odtworzenie tego pomoże Ci dostrzec iluzję.

Znacznik

Kod HTML to proste wiersze i kolumny. <body> to kontener z <div class="row"> przeznaczonym 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 siatka CSS, ponieważ wydawała się odpowiednia ze względu na styl prezentacji wierszy. Poza tym zawiera justify-content, co wydawało się dobrym sposobem na wyrównanie elementów podrzędnych wiersza.

Typy nadwozia

Zaczynając od stylów nadwozia, użyłem display: grid i grid-auto-rows do określenia układów wierszy. Wartość calc() podana dla rozmiarów wierszy uwzględnia obramowanie każdego wiersza i pomaga w dopasowaniu efektu do całego widocznego obszaru.

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

Style wierszy

Tutaj znów wybrałam siatkę, ale zamiast tworzenia wierszy użyłam funkcji grid-auto-flow: column, aby zmienić kierunek na kolumny. Następnie definiuję rozmiary kolumn i dodaję do rzędu trochę wypełnienia, aby pola nie wychodziły poza krawędź obszaru widocznego. Następnie kieruję na wybrane wiersze i wyrównuję zawartość do center lub end, tworząc przesunięcie, które wzmacnia 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 już wiesz, jak to zrobić, jak Ty to zrobisz? 🙂 Pływające? Flexbox? Gradient?!

Zróżnicujemy nasze podejścia i poznamy wszystkie sposoby tworzenia stron internetowych.

Utwórz wersję demonstracyjną, wyślij mi linki, a ja dodam je do sekcji z remiksami społeczności.

Remiksy społeczności