Eksplorasi yang menyenangkan tentang cara membuat ulang ilusi optik dengan CSS.
Dalam postingan ini, kita akan bersenang-senang. Pasti ada 100 cara untuk mencapai ilusi optik ini, dan saya hanya akan membagikan pemikiran saya kepada Anda, tetapi saya mendorong Anda untuk mencoba gaya Anda sendiri. 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 yang dapat ditemukan di mana pun, tetapi mata kita melihat garis miring. Mungkin sulit percaya, tetapi membangun ulang aplikasi 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 petak CSS
karena tampaknya sesuai dengan gaya presentasi baris, dan juga
menampilkan
justify-content
yang tampaknya 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. Kemudian, saya menentukan
ukuran kolom dan menambahkan sedikit padding inline ke baris, sehingga kotak tidak menyentuh
tepi area pandang. Kemudian, saya menargetkan baris tertentu dan meratakan konten ke
center
atau end
, sehingga membuat 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
- Menandai Boots dengan gradien: demo dan kode