Eğri ızgara illüzyonu oluşturma

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

Bu yayında biraz eğleneceğiz. Bu optik illüzyonu elde etmenin 100 yolu vardır. Sizinle yalnızca düşüncelerimi paylaşacağım ancak kendi tarzınızı denemeniz için sizi teşvik ediyorum. Demoyu deneyin ve kaynağı görüntüleyin.

Videoyu tercih ediyorsanız bu yayının YouTube sürümünü burada bulabilirsiniz:

Genel Bakış

Bu illüzyonun adı Café Wall Illusion'dur. Hiçbir yerde eğri çizgi yoktur ancak gözlerimiz eğikliği algılar. 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ır 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 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 yine ı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 karelerin rengini değiştirmek ve bir kenarlık eklemek gerekiyor:

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

Sonuç

Bunu nasıl yaptığımı öğrendiğinize göre, siz ne yapardınız? 🙂 Can simidi mi? Flexbox? 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