Eğri ızgara illüzyonu oluşturma

CSS ile optik illüzyonu yeniden yaratmanın eğlenceli bir keşfi.

Adem Parça

Bu gönderide biraz eğleneceğiz! Bu optik illüzyona ulaşmanın 100 yolu olmalı. Size sadece düşüncelerimi paylaşacağım ama stilinizi denemenizi tavsiye ederim. 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ı Kafe Duvarı İllüzyonu'dur. Hiçbir yerde eğik çizgi bulunmasa da gözlerimiz eğimleri algılıyor. İnanması zor olabilir, ama onu yeniden geliştirmek illüzyonu görmenize yardımcı olacaktır.

Markup

Bunun HTML'si basit satırlar ve sütunlardır. <body>, alt öğeler için <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

CSS ızgarasını seçtim, çünkü satırların sunum stiline uygun görünüyordu. Ayrıca, satır alt öğelerini dengelemek için iyi bir yöntem 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 öğelerini kullandım. Satır boyutları için gördüğünüz calc(), her bir satırdaki kenarlığı dikkate alır 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 ızgarayı seçtim, ancak ızgarayla satır oluşturmak yerine yönü sütunlar olarak değiştirmek için grid-auto-flow: column değerini kullandım. Daha sonra, kutuların görüntü alanı kenarına taşmaması için sütun boyutlarını tanımlayıp satıra biraz satır içi dolgu ekliyorum. Ardından, belirli satırları hedefleyip içeriği center veya end olarak gerekçelendiriyorum. Böylece illüzyonu pekiştiren bu ofseti 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 geriye kalan tek şey karelerin rengini değiştirmek ve bir kenarlık eklemektir:

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

Sonuç

Nasıl yaptığımı artık bildiğine göre sen ne yaparsın? 🙂 Kayan mı? Flexbox mı? Gradyan?!

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

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

Topluluk remiksleri