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

सीएसएस की मदद से ऑप्टिकल इल्यूज़न बनाने के तरीकों के बारे में मज़ेदार जानकारी.

इस पोस्ट में, हम थोड़ा मज़ेदार तरीके से बात करेंगे! इस ऑप्टिकल इल्यूज़न को बनाने के 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;
}

नतीजा

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

आइए, अलग-अलग तरीकों का इस्तेमाल करके, वेब पर कॉन्टेंट बनाने के सभी तरीके जानें.

डेमो बनाएं और मुझे ट्वीट करें लिंक भेजें. हम इसे कम्यूनिटी रीमिक्स सेक्शन में जोड़ देंगे!

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