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ę demo i wyś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
- Mark Boots z gradientami: demonstracja i kod