Membangun ilusi petak yang bengkok

Eksplorasi yang menyenangkan tentang cara membuat ulang 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 pemikiran saya, tetapi mendorong Anda untuk mencoba gaya Anda. Coba demo dan lihat sumbernya.

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

Ringkasan

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

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 petak CSS karena sepertinya cocok dengan gaya presentasi baris, dan juga memiliki justify-content yang sepertinya merupakan 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 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 dengan petak, saya menggunakan grid-auto-flow: column untuk mengubah arah menjadi kolom. Saya kemudian menentukan ukuran kolom dan menambahkan sedikit padding inline ke baris, sehingga kotak tidak melewati tepi area pandang. Kemudian saya menargetkan baris tertentu dan membenarkan konten ke 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 perlu dilakukan sekarang adalah mengubah warna kotak dan menambahkan batas:

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

Kesimpulan

Setelah Anda tahu cara saya melakukannya, bagaimana Anda melakukannya? 🙂 Float? Flexbox? Gradien?!

Mari kita diversifikasi pendekatan dan pelajari semua cara untuk mem-build di web.

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

Remix komunitas