Eğri ızgara illüzyonu oluşturma

CSS ile optik illüzyon oluşturmanın yollarını eğlenceli bir şekilde keşfedin.

Adam Argyle

Bu yayında biraz eğleneceğiz. Bu optik yanılsamayı elde etmenin 100 yolu olmalı. Ben sadece düşüncelerimi paylaşacağım ancak sizi kendi tarzınızı denemeye teşvik edeceğim. Demoyu deneyin ve kaynağı görüntüleyin.

Video tercih ediyorsanız bu yayının YouTube versiyonunu aşağıda bulabilirsiniz:

Genel Bakış

Bu yanılsamanın adı Cafe Wall Illusion'dır. Hiçbir yerde eğri çizgiler olmamasına rağmen gözlerimiz eğimleri algılar. Buna inanmak zor olabilir ancak güveni yeniden inşa etmek, bu yanılsamayı görmenize kesinlikle yardımcı olacaktır.

Brüt kar

Bunun HTML'si basit satırlar ve sütunlardan oluşur. <body>, çocuklara yönelik <div class="row"> içeren kapsayıcıdır. Her satırda beş <div class="square"> öğesi bulunur.

<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

Satırların sunum stiline uygun göründüğü için CSS grid'i seçtim. Ayrıca, satır alt öğelerini dengelemek için iyi bir yol gibi görünen justify-content özelliğini de içeriyor.

Gövde stilleri

Gövde stillerinden başlayarak satır düzenlerini sağlamak için display: grid ve grid-auto-rows kullandım. Satır boyutları için gördüğünüz calc(), her satırdaki kenarlığı dikkate alır ve efektin tam görüntü 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 tekrar ızgarayı seçtim ancak satır oluşturmak yerine yönü sütunlara değiştirmek için grid-auto-flow: column kullandım. Ardından sütun boyutlarını tanımlıyorum ve satıra biraz satır içi dolgu ekliyorum. Böylece kutular, görünüm alanı kenarına ulaşmıyor. Ardından belirli satırları hedefleyip içeriği center veya end ile hizalayarak yanılsamayı besleyen dengeyi oluşturuyorum.

.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 stilleri

Şimdi yapmanız gereken tek şey karelerin rengini değiştirmek ve kenarlık eklemek:

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

Sonuç

Benim nasıl yaptığımı öğrendiğinize göre, siz nasıl yapardınız? 🙂 Kayanlar? Flexbox? Gradyan?!

Yaklaşımlarımızı çeşitlendirelim ve web'de içerik oluşturmanın tüm yollarını öğrenelim.

Bir demo oluşturun, bağlantıları bana tweet atın. Ben de bu bağlantıları aşağıdaki topluluk remiksleri bölümüne ekleyeyim.

Topluluk remiksleri