Membangun ilusi petak yang bengkok

Penjelajahan seru tentang cara membuat ulang ilusi optik dengan CSS.

Adam Argyle

Dalam postingan ini, kita akan bersenang-senang! Pasti ada 100 cara untuk menciptakan ilusi optik ini, dan saya hanya akan membagikan pemikiran saya kepada Anda, tetapi mendorong Anda untuk mencoba gaya Anda sendiri. Coba demo dan lihat sumbernya.

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

Ringkasan

Nama ilusi ini adalah Ilusi Dinding Kafe. Tidak ada garis bengkok di mana pun, tetapi mata kita melihat kemiringan. Mungkin sulit untuk dipercaya, tetapi membangunnya kembali pasti akan membantu Anda melihat ilusi tersebut.

Markup

HTML untuk ini adalah baris dan kolom yang sederhana. <body> adalah penampung dengan <div class="row"> untuk anak-anak. 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 CSS grid karena tampaknya cocok dengan gaya presentasi baris, dan juga menampilkan justify-content yang tampaknya merupakan cara yang baik untuk mengimbangi turunan baris.

Gaya bodi

Dimulai dengan gaya isi, saya menggunakan display: grid dan grid-auto-rows untuk menyediakan tata letak baris. calc() yang Anda lihat untuk ukuran baris mempertimbangkan batas di setiap baris, dan membantu efek sesuai dengan area tampilan 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 inline ke baris, sehingga kotak tidak menabrak tepi area pandang. Kemudian, saya menargetkan baris tertentu dan mengatur perataan konten menjadi center atau end, sehingga menciptakan offset 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 tersisa sekarang adalah mengubah warna persegi dan menambahkan batas:

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

Kesimpulan

Sekarang setelah Anda tahu cara saya melakukannya, bagaimana Anda?! 🙂 Mengambang? Flexbox? Gradien?!

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

Buat demo, tweet linknya kepada saya, dan saya akan menambahkannya ke bagian remix komunitas di bawah.

Remix komunitas