बॉक्स-शैडो जनरेटर

box-shadow और बटन जनरेटर क्या है?#

box-shadow वह CSS नियम है जो किसी तत्व के पीछे ड्रॉप शैडो पेंट करता है। नाम के बावजूद, यह छाया से कहीं अधिक करता है: सही ढंग से स्तरित करने पर यह वह नरम उन्नयन बनाता है जो आधुनिक UI कार्ड और बटन को भौतिक महसूस कराता है, यह “दबाया गया” स्थिति हेतु एक आंतरिक खाँचा तराश सकता है, और किसी फ़ोकस किए गए इनपुट के चारों ओर रंगीन ग्लो की नकल कर सकता है। समस्या यह है कि एक शैडो को सही करने का मतलब प्रति परत पाँच मान (ऑफ़सेट X, ऑफ़सेट Y, ब्लर, स्प्रेड, रंग) संभालना है साथ ही एक वैकल्पिक inset कीवर्ड — और अधिकांश वास्तविक बटन दो या तीन परतें ढेर करते हैं, इसलिए आप हाथ से दस से पंद्रह संख्याएँ ट्यून करते-करते पहुँच जाते हैं।

यह पृष्ठ उस अंकगणित को हटा देता है। आप शैडो परतें ढेर करते हैं और साइडबार में बटन की त्रिज्या, बॉर्डर, पैडिंग, और रंग ठीक करते हैं; दायाँ पेन शैडो लागू एक लाइव बटन दिखाता है, और .btn CSS नियम और मेल खाता <button> HTML दोनों चिपकाने-के-लिए-तैयार लिखता है। लोड होने पर जो डिफ़ॉल्ट दिखता है वह आधुनिक डिज़ाइन सिस्टम में उपयोग होने वाला परिचित द्वि-परत उन्नत बटन है — एक ठीक शुरुआती बिंदु जिसे आप फिर अपने ब्रांड की ओर झुकाते हैं।

इसका उपयोग कैसे करें#

साइडबार नियंत्रण रखता है; दायाँ पेन पूर्वावलोकन, CSS आउटपुट, और HTML आउटपुट रखता है।

1. शैडो बनाएँ। छाया के अंतर्गत, नई परत ढेर करने हेतु परत जोड़ें क्लिक करें। हर परत के छह नियंत्रण हैं:
   • ऑफ़सेट X / ऑफ़सेट Y — शैडो कितना दायें/नीचे खिसकता है (ऋणात्मक बायें/ऊपर जाता है)। 0/0 इसे केंद्रित करता है, समान ग्लो बनाता है।
   • ब्लर — किनारा कितना नरम है। 0 एक कठोर, समतल प्रति है; बड़े मान इसे फैलाते हैं। CSS में ब्लर ऋणात्मक नहीं हो सकता।
   • स्प्रेड — शैडो के पदचिह्न को बढ़ाता या घटाता है। ऋणात्मक स्प्रेड एक चौड़े ब्लर को एक कसकर, विश्वसनीय किनारे में कसता है।
   • रंग — एक hex रंग। शैडो को पारभासी बनाने हेतु alpha चैनल (#00000033 जैसा 8-अंकीय hex) उपयोग करें; पूर्ण अपारदर्शी रंग समतल #RRGGBB रेंडर होते हैं।
   • आंतरिक — इसे पलटें ताकि शैडो तत्व के अंदर पेंट हो (एक दबाया-हुआ, तराशा रूप) इसके पीछे के बजाय।
   • ऊपर ले जाएं / नीचे ले जाएं / हटाएं परतों को पुनर्क्रमित या हटाते हैं। सूची में पहली परत सबसे ऊपर पेंट होती है; अंतिम सबसे पीछे रहती है।
2. बटन स्टाइल करें। बटन के अंतर्गत, लेबल टेक्स्ट सेट करें, फिर त्रिज्या, बॉर्डर चौड़ाई, बॉर्डर का रंग, पैडिंग Y / X, बैकग्राउंड, और टेक्स्ट रंग। रंग फ़ील्ड एक hex टेक्स्ट बॉक्स को नेटिव कलर पिकर के साथ जोड़ते हैं।
3. जो चाहिए वह कॉपी करें। CSS के बगल में कॉपी पूरा .btn नियम लेता है; HTML के बगल में कॉपी <button> तत्व लेता है। बॉर्डर चौड़ाई 0 पर सेट करने से बॉर्डर border: none; में सिकुड़ जाता है।

मुख्य विशेषताएँ#

• क्रम में कई परतें। एक विश्वसनीय शैडो लगभग हमेशा दो या तीन परतों का होता है — तत्व के पास एक कसकर गहरा किनारा और आगे एक नरम, हल्की धुलाई। आप जितनी चाहें उतनी ढेर और पुनर्क्रमित कर सकते हैं।
• alpha-जागरूक रंग क्रमानुसारण। पूर्ण अपारदर्शी रंग साफ़ #RRGGBB के रूप में उत्सर्जित होता है; जैसे ही आप पारदर्शिता जोड़ते हैं यह ट्रिम किए गए alpha के साथ rgba(r, g, b, a) में स्विच करता है — वे रूप जो वास्तविक स्टाइलशीट वास्तव में उपयोग करते हैं।
• एक नियम में पूरा बटन। त्रिज्या, बॉर्डर, पैडिंग, पृष्ठभूमि, टेक्स्ट रंग, और शैडो सभी एकल .btn ब्लॉक में उत्सर्जित होते हैं, इसलिए एक पेस्ट तत्व को पूरी तरह स्टाइल करता है।
• मेल खाता HTML। HTML आउटपुट केवल <button class="btn">Label</button> है, लेबल HTML-एस्केप्ड — < या & से भरा लेबल भी चिपकाने हेतु सुरक्षित।
• लाइव पूर्वावलोकन बायें-से-दायें पर पिनन्ड। धनात्मक X ऑफ़सेट हमेशा शैडो को दायें खिसकाता है, इसलिए पूर्वावलोकन पृष्ठ भाषा की परवाह किए बिना LTR पर बाध्य है।

विस्तृत उदाहरण#

पृष्ठ एक तैयार-मिला उन्नत इंडिगो बटन के साथ लोड होता है। इसकी छाया दो परतों की है: बटन से चिपका एक कसकर -1px स्प्रेड किनारा, और आगे एक चौड़ी, धुंधली धुलाई। सटीक उत्पन्न CSS:

.btn {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.102);
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  background-color: #4F46E5;
  color: #FFFFFF;
}

ध्यान दें कि दोनों परतें मिलकर काम करती हैं: पहली (4px 6px ब्लर, -1px स्प्रेड, 0.2 alpha) क्रिस्प संपर्क किनारा परिभाषित करती है; दूसरी (10px 15px ब्लर, -3px स्प्रेड, 0.102 alpha) परिवेशी उठाव देती है। alpha घटाएँ और शैडो समतल काला ठप्पा बन जाता है; स्प्रेड बढ़ाएँ और बटन बहुत ऊँचा तैरता हुआ दिखता है।

दबाया हुआ स्थिति हेतु, उन परतों को साफ़ करें और एकल जोड़ें: आंतरिक चालू, ऑफ़सेट 0/2, ब्लर 4, स्प्रेड 0, रंग #00000033। आउटपुट inset 0 2px 4px rgba(0, 0, 0, 0.2) हो जाता है — तत्व अब सतह में धंसा हुआ दिखता है, एक :active शैली हेतु सटीक।

अक्सर पूछे जाने वाले प्रश्न#

जब मैंने hex टाइप किया तो रंग rgba(...) के रूप में क्यों आता है?#

जब आपके hex में alpha चैनल हो (8 अंक, जैसे #00000033), तो टूल इसे rgba(r, g, b, a) के रूप में क्रमानुसारित करता है क्योंकि वह रूप है जिसे अधिकांश CSS टूलिंग और पुराने ब्राउज़र विश्वसनीय ढंग से पार्स करते हैं। पूर्ण अपारदर्शी रंग — कोई alpha नहीं, या alpha FF पर — कॉम्पैक्ट #RRGGBB ही रहता है। दोनों आपके ट्यून किए गए के समान रेंडर होते हैं; यह केवल इस बात का प्रश्न है कि आगे कौन-सा अंकन अधिक मज़बूत है।

परतें किस क्रम में पेंट होती हैं?#

सूची में पहली परत सबसे ऊपर पेंट होती है, अंतिम सबसे नीचे। प्राकृतिक उन्नयन हेतु, तीखी, गहरी, पास की परत पहले रखें और नरम, हल्की, दूर की परत दूसरी — इस तरह कसकर संपर्क किनारा परिवेशी धुलाई से दबा नहीं। जब तक पूर्वावलोकन सही न पढ़े ऊपर ले जाएं / नीचे ले जाएं से पुनर्क्रमित करें।

ब्लर या स्प्रेड — अंतर क्या है?#

ब्लर शैडो के किनारे को नरम करता है (पूर्ण रंग से पारदर्शी तक एक ग्रेडिएंट)। स्प्रेड ब्लर लागू होने से पहले संपूर्ण शैडो को एक निश्चित मात्रा से बढ़ाता या घटाता है — धनात्मक स्प्रेड इसे बड़ा और अधिक ठोस बनाता है, ऋणात्मक स्प्रेड इसमें खाता है और चौड़े-ब्लर वाली परत पर कसकर, पेशेवर किनारे का रहस्य है। एक सामान्य ग़लती केवल ब्लर की ओर बढ़ना और एक फूला हुआ बादल पाना है; -2px या -3px स्प्रेड जोड़ने से यह वापस आकार में आ जाता है।

क्या मैं इस शैडो को बटन नहीं, किसी div पर उपयोग कर सकता?#

हाँ। CSS किसी भी तत्व पर काम करता है जो box-shadow स्वीकार करता है — केवल box-shadow: पंक्ति (या अपने चयनकर्ता के नाम पर पुनःनामित पूरा नियम) कॉपी करें और बटन-विशिष्ट घोषणाएँ हटा दें जो आपको नहीं चाहिए। HTML आउटपुट केवल तब प्रासंगिक है जब आप वास्तव में <button> चाहते हैं।