सीएसएस की मदद से ऑप्टिकल इल्यूज़न बनाने के तरीकों के बारे में मज़ेदार जानकारी.
इस पोस्ट में हम थोड़ा मज़ा करेंगे! इस ऑप्टिकल इल्यूज़न को पाने के 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;
}
नतीजा
अब आपको पता चल गया है कि मैंने यह कैसे किया. अब आप इसे कैसे करेंगे?! 🙂 फ़्लोट? फ़्लेक्सबॉक्स? ग्रेडिएंट?!
आइए, हम अपने तरीकों में विविधता लाएं और वेब पर काॅन्टेंट पोस्ट करने के सभी तरीके जानें.
डेमो बनाएं और मुझे ट्वीट करें. इसके बाद, मैं इसे यहां कम्यूनिटी रीमिक्स सेक्शन में जोड़ दूंगा!
कम्यूनिटी रीमिक्स
- ग्रेडिएंट वाले मार्क बूट: डेमो और कोड