इस उपकरण के बारे में
बॉक्स शैडो जनरेटर एक परत की छाया बनाता है। इसमें क्षैतिज और ऊर्ध्वाधर ऑफ़सेट, धुंधलेपन की त्रिज्या, फैलाव की त्रिज्या, रंग, अपारदर्शिता और inset के विकल्प हैं। मान्य सेटिंग तुरंत प्रीव्यू कार्ड पर लागू होती हैं।
कैसे इस्तेमाल करें
- क्षैतिज और ऊर्ध्वाधर ऑफ़सेट तथा धुंधलेपन की त्रिज्या समायोजित करें।
- फैलाव की त्रिज्या, छाया का रंग और अपारदर्शिता सेट करें।
- अंदर की छाया चाहिए तो Inset चालू करें।
- प्रीव्यू जाँचकर CSS कॉपी करें या डिफ़ॉल्ट छाया पर रीसेट करें।
उदाहरण
- ऋणात्मक क्षैतिज ऑफ़सेट छाया को बाईं ओर ले जाता है।
- धनात्मक फैलाव छाया को बढ़ाता है और ऋणात्मक फैलाव उसे छोटा करता है।
- inset चालू करने से छाया बॉक्स के अंदर बनती है।
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);कार्यविधि और CSS विवरण
box-shadow में क्रम से offset-x, offset-y, blur-radius, spread-radius और color आते हैं; inset वैकल्पिक है। ऑफ़सेट और फैलाव ऋणात्मक हो सकते हैं, लेकिन धुंधलेपन की त्रिज्या नहीं। अपारदर्शिता तय करती है कि छाया अपने बैकग्राउंड में कितनी मिलेगी।
सामान्य उपयोग
- पैनल, डायलॉग और बटन में गहराई का आभास देना।
- नरम और तीखी छाया की तुलना करना।
- फ़ॉर्म के तत्वों में अंदर की छाया बनाना।
गोपनीयता
इनपुट की प्रोसेसिंग, गणना, CSS बनाना और प्रीव्यू, सब आपके ब्राउज़र में होता है। आपकी सामग्री अपलोड नहीं होती। किसी बैकएंड, डेटाबेस, ऑनलाइन API या तीसरे पक्ष के CDN का इस्तेमाल नहीं होता और आपका इनपुट अपने आप सेव नहीं होता।
FAQ
blur और spread में क्या अंतर है?
blur किनारों का धुंधलापन नियंत्रित करता है। spread तय करता है कि धुंधलाने से पहले छाया का आकार कितना बढ़े या घटे।
inset क्या है?
inset बाहर की छाया को बॉक्स के अंदर की छाया में बदलता है।
क्या box-shadow में ऋणात्मक मान इस्तेमाल कर सकते हैं?
क्षैतिज ऑफ़सेट, ऊर्ध्वाधर ऑफ़सेट और फैलाव ऋणात्मक हो सकते हैं। धुंधलेपन की त्रिज्या ऋणात्मक नहीं हो सकती।
क्या यह उपकरण कई परतों वाली छाया बनाता है?
यह पेज एक परत की छाया बनाता है। CSS में कॉमा से अलग करके box-shadow की कई परतें जोड़ सकते हैं।