Bu yazımızda biraz eğleneceğiz! Bu optik illüzyona ulaşmanın 100 yolu olmalı ve ben sizinle sadece kendi düşüncelerimi paylaşacağım ama sizi kendi tarzınızı denemeye teşvik edeceğim. Demoyu deneyin Ve kaynağı görüntüle.
Videoyu tercih ederseniz, işte bu gönderinin bir YouTube versiyonu:
genel bakış #
Bu illüzyonun adı, Kafe Duvar İllüzyonu. Hiçbir yerde eğri çizgi yoktur, ancak gözlerimiz eğimleri algılar. İnanması zor olabilir ama onu yeniden inşa etmek kesinlikle illüzyonun ötesini görmenize yardımcı olacaktır.
işaretleme #
Bunun için HTML basit satırlar ve sütunlardır. bu <body> konteyner ile <div class="row"> Çocuklar için. Her satır beş içerir <div class="square"> elementler.
div class="row">
div class="square"></div>
div class="square"></div>
div class="square"></div>
div class="square"></div>
div class="square"></div>
</div>
…
stiller #
Seçtim CSS ızgarası çünkü sıraların sunum tarzı göz önüne alındığında uygun görünüyordu ve aynı zamanda justify-content bu da sıradaki çocukları dengelemek için iyi bir yol gibi görünüyordu.
Vücut stilleri #
Vücut stillerinden başlayarak, kullandım display: grid Ve grid-auto-rows satır düzenlerini sağlamak için. bu calc() satır boyutları için gördüğünüz, her satırdaki kenarlığı hesaba katar ve efektin tam görünüm alanına sığmasına yardımcı olur.
body {
display: grid;
grid-auto-rows: calc(20vh - 4px);
gap: 4px;
background: gray;
margin: 0;
}
Satır stilleri #
Burada yine ızgarayı seçtim ama onunla satırlar oluşturmak yerine kullandım grid-auto-flow: column yönü sütunlara değiştirmek için. Daha sonra sütun boyutlarını tanımlıyorum ve satıra küçük bir satır içi dolgu ekliyorum, böylece kutular görüntü alanı kenarına girmiyor. Ardından belirli satırları hedefliyorum ve içeriği şunlardan birine uygun hale getiriyorum: center veya endillüzyonu besleyen dengeyi yaratıyor.
.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;
}
Kare stiller #
Şimdi geriye kalan tek şey karelerin rengini değiştirmek ve bir kenarlık eklemek:
.square {
border-inline: 4px solid gray;
background: black;
}
Çözüm #
Artık nasıl yaptığımı bildiğine göre, nasıl yapardın?! 🙂 Yüzer mi? Flexbox? Gradyan mı?
Yaklaşımlarımızı çeşitlendirelim ve web üzerinde oluşturmanın tüm yollarını öğrenelim.
Bir demo oluşturun, beni tweetle bağlantılar ve onu aşağıdaki topluluk remiksleri bölümüne ekleyeceğim!