बॉक्स शैडो जनरेटर इस्तेमाल कैसे करें
- 1
शुरुआती शैडो चुनें
सॉफ़्ट, लेयर्ड या एलिवेशन 2 जैसे किसी प्रीसेट पर क्लिक करें, या डिफ़ॉल्ट लेयर को ही बदलें।
- 2
हर लेयर को आकार दें
कोई लेयर चुनें और उसका X और Y ऑफ़सेट, ब्लर, स्प्रेड, रंग, ओपेसिटी और इनसेट सेट करें।
- 3
अपनी सतह पर जाँचें
जिस एलिमेंट को स्टाइल कर रहे हैं, उससे मिलाने के लिए बॉक्स का साइज़, कोने की गोलाई और रंग बदलें।
- 4
CSS कॉपी करें
box-shadow declaration या Tailwind क्लास को कॉपी करके अपने कोड में डालें।
सीमाएँ और Pro
साइन-अप के बिना मुफ़्त: अनलिमिटेड लेयर, −100 से 100 px तक ऑफ़सेट, 200 px तक ब्लर और 12 शैडो प्रीसेट।
Pro विज्ञापन हटाता है; शैडो एडिटर हर प्लान में पूरा मिलता है। Pro देखें
बॉक्स शैडो जनरेटर के बारे में
CSS की box-shadow प्रॉपर्टी में लेयर की एक सूची होती है। हर लेयर में हॉरिज़ॉन्टल और वर्टिकल ऑफ़सेट, ब्लर रेडियस, स्प्रेड की दूरी, एक रंग और वैकल्पिक inset कीवर्ड होता है। प्राकृतिक दिखने वाली गहराई पाने के लिए दो या ज़्यादा लेयर में इन सबका संतुलन बनाना पड़ता है, जो स्टाइलशीट में नंबर बदलकर करना मुश्किल है। यह एडिटर स्लाइडर खींचते समय लाइव प्रीव्यू बॉक्स पर नतीजा दिखाता है और आपके लिए declaration के साथ Tailwind का shadow-[…] क्लास भी लिख देता है।
जितनी चाहें उतनी लेयर जोड़ें, तुलना के लिए किसी को कुछ देर छिपाएँ, ऊपर या नीचे खिसकाएँ (सूची की पहली लेयर सबसे ऊपर बनती है), या दबे हुए बटन और इनपुट फ़ील्ड के लिए उसे इनसेट पर बदल दें। ऑफ़सेट −100 से 100 पिक्सल तक, ब्लर 200 पिक्सल तक और स्प्रेड −100 से 100 तक रखा जा सकता है, और हर रंग की अपनी ओपेसिटी होती है। नेगेटिव स्प्रेड आधुनिक सॉफ़्ट शैडो की ख़ास तरकीब है: यह शैडो को एलिमेंट के नीचे खींच लेता है, ताकि नीचे सिर्फ़ हल्की चमक दिखे।
प्रीव्यू बॉक्स का साइज़ बदला जा सकता है और उसे कोई भी कोने की गोलाई, बॉक्स का रंग और बैकग्राउंड का रंग दिया जा सकता है। इससे आप अपने डिज़ाइन की असली सतह पर शैडो परख सकते हैं, डार्क थीम में भी, जहाँ शैडो को ज़्यादा ओपेसिटी या रंगीन ग्लो चाहिए।
शुरुआत के लिए बारह प्रीसेट हैं: Material Design के चार एलिवेशन लेवल, एक सॉफ़्ट सिंगल लेयर, पाँच लेयर वाला स्मूद शैडो, कठोर neubrutalist ऑफ़सेट, neumorphism, अंदरूनी शैडो, रंगीन ग्लो, फ़ोकस जैसी आउटलाइन रिंग और फ़्लोटिंग कार्ड। ग्रेडिएंट दूसरे टैब में हैं; टेक्स्ट शैडो और drop-shadow() फ़िल्टर इसमें शामिल नहीं हैं।
गोपनीयता
शैडो इसी पेज में बनता और प्रीव्यू होता है, और आपकी लेयर सिर्फ़ इस ब्राउज़र के लोकल स्टोरेज में सेव होती हैं, ताकि रीलोड के बाद भी बनी रहें। कोई सेटिंग या डिज़ाइन सर्वर पर नहीं भेजा जाता।