टेढ़ा-मेढ़ा ग्रिड इल्यूज़न बनाना

सीएसएस की मदद से, ऑप्टिकल इल्यूज़न (दृष्टि भ्रम) को फिर से पैदा करने के मज़ेदार तरीके.

एडम आर्गील

इस पोस्ट में हम कुछ मज़ेदार करने वाले हैं! इस ऑप्टिकल इल्यूज़न को हासिल करने के 100 तरीक़े होते हैं और मैं आपको सिर्फ़ अपने विचारों के बारे में बताऊँगी, लेकिन मुझे आपको अपनी स्टाइल आज़माने के लिए प्रोत्साहित करना है. डेमो आज़माएं और सोर्स देखें.

अगर आप वीडियो पसंद करते हैं, तो यहां इस पोस्ट का YouTube वर्शन दिया गया है:

खास जानकारी

इस भ्रम का नाम कैफ़े वॉल इलूज़न है. कहीं भी कोई टेढ़ी-मेढ़ी लाइन नहीं दिखती है, लेकिन हमारी नज़रें तिरछी नज़रों का पता लगाती हैं. इस पर भरोसा करना मुश्किल हो सकता है, लेकिन इसे फिर से बनाने से आपको इस भ्रम से छुटकारा पाने में मदद मिलेगी.

मार्कअप

एचटीएमएल में यह सीधे तौर पर काम करने वाली पंक्तियां और कॉलम होते हैं. <body>, बच्चों के लिए <div class="row"> वाला कंटेनर है. हर लाइन में पांच <div class="square"> एलिमेंट होते हैं.

<div class="row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
…

स्टाइल

मैंने सीएसएस ग्रिड चुना, क्योंकि यह लाइन के प्रज़ेंटेशन स्टाइल के हिसाब से सही लग रहा था. साथ ही, इसमें कई सुविधाएं भी हैं.justify-contentयह लाइन बच्चों को ऑफ़सेट करने का एक अच्छा तरीका है.

कार की बॉडी स्टाइल

बॉडी स्टाइल की शुरुआत करते हुए, मैंने लाइन के लेआउट देने के लिए display: grid और grid-auto-rows का इस्तेमाल किया. लाइन के साइज़ के लिए आपको दिखने वाला calc(), हर लाइन की बॉर्डर को ध्यान में रखता है. इससे इफ़ेक्ट को पूरे व्यूपोर्ट में फ़िट करने में मदद मिलती है.

body {
  display: grid;
  grid-auto-rows: calc(20vh - 4px);
  gap: 4px;
  background: gray;
  margin: 0;
}

लाइन की स्टाइल

यहां मैंने फिर से ग्रिड चुना, लेकिन इसकी मदद से पंक्तियां बनाने के बजाय, मैंने कॉलम की दिशा बदलने के लिए grid-auto-flow: column का इस्तेमाल किया. इसके बाद, कॉलम के साइज़ तय किए जाते हैं और पंक्ति में थोड़ी इनलाइन पैडिंग (जगह) जोड़ी जाती है. इससे कोई बॉक्स, व्यूपोर्ट के किनारे तक न चला जाए. इसके बाद, मैंने कुछ लाइनों को टारगेट किया और कॉन्टेंट को center या end के हिसाब से सही ठहराया, ताकि यह भ्रम पैदा हो सके.

.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;
}

स्क्वेयर स्टाइल

अब बस स्क्वेयर का रंग बदलना और बॉर्डर जोड़ना है:

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

नतीजा

अब आपको पता चल गया है कि मैंने इसे कैसे किया, तो आपको कैसा लगा?! 🙂 फ़्लोट है? Flexbox का इस्तेमाल करना है? ग्रेडिएंट?!

चलिए, इसे अलग-अलग तरीके से समझें और वेब पर सभी के काम करने के तरीके सीखें.

एक डेमो तैयार करें, मुझे ट्वीट करें वाले लिंक, और मैं उसे नीचे दिए गए कम्यूनिटी रीमिक्स सेक्शन में जोड़ दूंगी!

कम्यूनिटी रीमिक्स