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
- Gradyanlarla botları işaretleme: demo ve kod