Membangun ilusi petak yang bengkok

Eksplorasi menyenangkan tentang cara menciptakan ilusi optik dengan CSS.

Adam Argyle

Dalam postingan ini, kita akan bersenang-senang! Pasti ada 100 cara untuk mencapai ilusi optik ini, dan saya hanya akan berbagi dengan Anda, tapi mendorong Anda untuk mencoba gaya Anda. Coba demonya dan lihat sumbernya.

Jika Anda lebih suka video, berikut versi YouTube postingan ini:

Ringkasan

Nama ilusi ini adalah Ilusi Dinding Cafe. Tidak ada garis bengkok yang dapat ditemukan di mana pun, tetapi mata kita melihat miring. Ini mungkin sulit dipercaya, tetapi membangunnya kembali pasti akan membantu Anda melihat melalui ilusi.

Markup

HTML untuk ini adalah baris dan kolom sederhana. <body> adalah penampung dengan <div class="row"> untuk turunan. Setiap baris berisi lima elemen <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>
…

Gaya

Saya memilih petak CSS karena terlihat cocok dengan gaya presentasi baris, dan juga fitur justify-content yang sepertinya cara yang baik untuk mengimbangi turunan baris.

Gaya bodi

Mulai dari gaya isi, saya menggunakan display: grid dan grid-auto-rows untuk menyediakan tata letak baris. calc() yang Anda lihat untuk ukuran baris memperhitungkan batas di setiap baris, dan membantu efeknya sesuai dengan area pandang penuh.

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

Gaya baris

Di sini saya memilih petak lagi, tetapi alih-alih membuat baris dengannya, saya menggunakan grid-auto-flow: column untuk mengubah arah ke kolom. Kemudian saya menentukan ukuran kolom dan menambahkan sedikit padding sejajar ke baris, sehingga kotak tidak masuk ke tepi area pandang. Lalu, saya menargetkan baris tertentu dan membenarkan konten ke center atau end, sehingga membuat offset tersebut yang memicu ilusi.

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

Gaya persegi

Yang perlu dilakukan sekarang adalah mengubah warna kotak dan menambahkan batas:

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

Kesimpulan

Sekarang Anda tahu bagaimana saya melakukannya, bagaimana Anda akan?! 🙂 Mengapung? Flexbox? Gradien?!

Mari lakukan diversifikasi pendekatan dan pelajari semua cara untuk membangun di web.

Buat demo, link tweet me, dan saya akan menambahkannya ke bagian remix komunitas di bawah.

Remix komunitas