Tworzenie iluzji zakrzywionej siatki

Zabawne sposoby na odtworzenie złudzenia optycznego za pomocą CSS.

Adam Argyle

W tym poście trochę się pobawimy. Jest 100 sposobów na to, żeby osiągnąć to złudzenie optyczne. Pozwolę sobie podzielić się z Wami swoimi przemyśleniami, ale zachęcam do wypróbowania własnego stylu. Wypróbuj wersję demo i wyświetl kod źródłowy.

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

Omówienie

Nazwa tej iluzji to Iluzja ścian kawiarni. Nigdzie nie ma przekrzywionych linii, ale nasze oczy dostrzegają ułamki. 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 siatkową czcionkę CSS, ponieważ pasowała do stylu prezentacji wierszy. Poza tym zawiera ona 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 elementów display: grid i grid-auto-rows do tworzenia 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 wiersza 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