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 illüzyonu başarmanın 100 yolu vardır. Ben yalnızca kendi düşüncelerimi paylaşacağım ama tarzınızı denemenizi öneririm. Demoyu deneyin ve kaynağı görüntüleyin.

Video kullanmayı tercih ederseniz bu gönderinin YouTube versiyonunu kullanabilirsiniz:

Genel Bakış

Bu illüzyonun adı Cafe Duvar İlüzyonu'dur. Hiçbir yerde kesik çizgi yok ama eğimleri gözlerimiz algılıyor. Buna inanmak zor olabilir ancak yeniden inşa etmek, illüzyonu görmenize kesinlikle yardımcı olacaktır.

Brüt kar

Bunun HTML'si basit satırlar ve sütunlardır. <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 stili göz önüne alındığında CSS ızgara'yı seçtim. Ayrıca, satır alt öğelerini dengelemek için iyi bir yöntem olan justify-content özelliğini de kullandım.

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ığı hesaba katar ve efektin görüntü alanının tamamı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 ızgara seçtim ancak ızgarayla satır oluşturmak yerine grid-auto-flow: column simgesini kullanarak yönü sütunlara değiştirdim. Ardından sütun boyutlarını tanımlar ve kutuların görünüm kenarına taşmaması için satıra biraz satır içi dolgu eklerim. Ardından belirli satırları hedefliyorum ve içeriği center veya end değerine göre hizalayarak illüzyonu destekleyen bir kaydırma 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 stiller

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

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

Sonuç

Bunu nasıl yaptığımı öğrendiğinize göre, siz ne yapardınız? 🙂 Yüzen mi? Flexbox mı? Gradyan mı?

Yaklaşımlarımızı çeşitlendirelim ve web'de uygulama geliştirmenin tüm yollarını öğrenelim.

Bir demo oluşturun, bağlantılarını bana tweetleyin. Ardından, aşağıdaki topluluk remiksleri bölümüne ekleyeceğim.

Topluluk remiksleri