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

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

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

नतीजा

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

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

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

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