लेयर वाले CSS box-shadow बनाएं और उन्हें असली सर्विस व कीमत कार्ड पर हल्के-गहरे बैकग्राउंड तथा स्पष्ट फ़ोकस स्थिति में देखें। CSS और इस्तेमाल के लिए तैयार कार्ड कंपोनेंट कॉपी करें।
धूसर चौकोर पर shadow का अंदाज़ा लगाना मुश्किल है। यहां आप लेयर वाला box-shadow सेट करते हैं और उसे सर्विस कार्ड तथा कीमत कार्ड पर, हल्के या गहरे पेज पर देख सकते हैं। Tab दबाकर कीबोर्ड फ़ोकस रिंग भी जांचें। सही दिखने पर CSS या पूरा कार्ड कंपोनेंट कॉपी करें। सब कुछ आपके ब्राउज़र में चलता है। आप जो टाइप करते हैं वह We.Inc या किसी और को नहीं भेजा जाता और टैब बंद करने पर मिट जाता है।
तैयार सेटिंग से शुरू करें या पहली लेयर बदलें: क्षैतिज और लंबवत ऑफ़सेट, blur, spread, रंग, अपारदर्शिता और inset।
अधिकतम पांच लेयर जोड़ें। एक बड़ी shadow की तुलना में कई लेयर (एक कड़ी और एक चौड़ी, हल्की) ज़्यादा स्वाभाविक लगती हैं।
प्रीव्यू को हल्के और गहरे पेज के बीच बदलें। कार्ड बटन पर फ़ोकस ले जाने और फ़ोकस रिंग दिखती रहने की जांच के लिए Tab दबाएं।
अगर चुने हुए बैकग्राउंड पर shadow बहुत हल्की है या कार्ड का टेक्स्ट WCAG AA contrast से कम है, तो जांच चेतावनी देती है।
box-shadow घोषणा या HTML और CSS वाले पूरे कार्ड कंपोनेंट को कॉपी करें।
गहरे बैकग्राउंड पर shadow लगभग गायब हो जाती है। कार्ड अलग दिखाने के लिए उसका रंग थोड़ा हल्का करें या पतला बॉर्डर लगाएं।
नरम असर के लिए shadow का रंग पूरी तरह काला रखने के बजाय बैकग्राउंड के रंग की ओर रखें।
फ़ोकस दिखाने के लिए सिर्फ shadow पर निर्भर न रहें। स्पष्ट outline भी लगाएं।
बहुत बड़े blur को दिखाने में ज़्यादा संसाधन लगते हैं। लंबी सूची पर उसे animate न करें।
पूरी साइट पर shadow के एक या दो स्तर रखें, ताकि गहराई का अर्थ बना रहे।
अक्सर पूछे जाने वाले सवाल
CSS box-shadow प्रॉपर्टी कैसे काम करती है?
box-shadow में क्षैतिज ऑफ़सेट, लंबवत ऑफ़सेट, वैकल्पिक blur radius, वैकल्पिक spread और रंग दिया जाता है। अंदर की shadow के लिए inset कीवर्ड जोड़ा जा सकता है। कई shadow को कॉमा से अलग करके सूचीबद्ध कर सकते हैं; पहली shadow सबसे ऊपर दिखाई जाती है।
लेयर वाली shadow बेहतर क्यों दिखती है?
असली वस्तुएं अपने पास तीखी shadow और थोड़ी दूर चौड़ी, हल्की shadow बनाती हैं। बढ़ते blur और घटती अपारदर्शिता वाली दो या तीन लेयर इसका असर देती हैं।
गहरे बैकग्राउंड पर मेरी shadow क्यों नहीं दिखती?
गहरे पेज पर गहरी shadow में बहुत कम contrast होता है। टूल इसकी चेतावनी देता है। कार्ड को हल्के सतह रंग या हल्के बॉर्डर से उभारें।
क्या box-shadow पहुंच-सुलभता को प्रभावित करता है?
Shadow सजावट है, इसलिए उसे खुद contrast नियम पूरे करने की ज़रूरत नहीं। ज़रूरी है कि कार्ड का टेक्स्ट पढ़ने योग्य रहे और फ़ोकस सिर्फ shadow में बदलाव से नहीं, स्पष्ट outline से दिखे।
क्या CSS shadow जनरेटर मुफ़्त है?
हां, साइन अप की ज़रूरत नहीं। कोड किसी भी प्रोजेक्ट में कॉपी करें।
जिन कंपोनेंट को जारी करेंगे उन्हीं पर shadow जांचें
अकेले चौकोर पर ठीक दिखने वाली shadow, कीमत कार्ड की पंक्ति में भारी लग सकती है या तस्वीर के नीचे गायब हो सकती है। छोटे कारोबार की साइट पर इस्तेमाल होने वाले कार्ड—आइकन वाला सर्विस कार्ड और चुना हुआ कीमत प्लान—पर प्रीव्यू करने से असली नतीजा दिखता है।
कंपोनेंट कोड में focus-visible outline शामिल है, इसलिए आप जो भी shadow चुनें, कीबोर्ड से कार्ड इस्तेमाल किया जा सकता है।