टास्क पथ / इनपुट से परिणाम तक
CSS बॉक्स शैडो कैसे बनाएं
- 01
शैडो की स्थिति तय करें
क्षैतिज ऑफ़सेट और ऊर्ध्वाधर ऑफ़सेट सेट करें, दोनों -80 से 80 px तक। निगेटिव मान शैडो को बाएं या ऊपर धकेलते हैं; शून्य उसे कार्ड के पीछे केंद्रित करता है। वर्कस्पेस 12 px दाएं और 18 px नीचे खुलता है — क्लासिक ड्रॉप-शैडो प्लेसमेंट।
- 02
ब्लर और स्प्रेड ट्यून करें
कोमलता के लिए ब्लर रेडियस 0 से 120 px समायोजित करें — डिफ़ॉल्ट 32 px है — और ब्लर लागू होने से पहले शैडो बढ़ाने या घटाने के लिए स्प्रेड रेडियस -40 से 60 px। -4 px का डिफ़ॉल्ट स्प्रेड शैडो को थोड़ा कसता है ताकि किनारा साफ़ रहे।
- 03
रंग और ओपेसिटी सेट करें
छह-अंकीय शैडो रंग चुनें — डिफ़ॉल्ट #0b0d12 लगभग-काला है — और शैडो ओपेसिटी 0.01 के चरणों में 0 से 1 तक सेट करें। ओपेसिटी आउटपुट में rgba() रंग का अल्फ़ा चैनल बन जाती है, इसलिए 0.28, rgba(11, 13, 18, 0.28) के रूप में रेंडर होता है।
- 04
इनसेट मोड टॉगल करें
शैडो को बॉक्स के अंदर ले जाने के लिए इनसेट शैडो चालू करें, जो दबी या धंसी सतह जैसी पढ़ी जाती है — इनपुट फ़ील्ड और टॉगल किए बटन के लिए उपयोगी। टॉगल चालू होने पर बना डिक्लेरेशन inset कीवर्ड आगे जोड़ देता है।
- 05
नमूने से तुलना करें
तीखी संदर्भ शैली के लिए नमूना लोड करें दबाएं: दोनों अक्षों पर 8 px ऑफ़सेट, शून्य ब्लर और शून्य स्प्रेड, 0.35 ओपेसिटी पर #0f4cff में — कड़े-किनारे वाली ऑफ़सेट आउटलाइन। रीसेट कोमल डिफ़ॉल्ट शैडो लौटाता है, और लाइव पूर्वावलोकन हर बदलाव पर फिर से रेंडर होता है।
- 06
CSS कॉपी या डाउनलोड करें
.shadow-card नियम कॉपी करने के लिए CSS कॉपी करें दबाएं, या उसे toolars-box-shadow.css के रूप में सहेजने के लिए .css डाउनलोड करें। जब तक कोई मान रेंज से बाहर है कॉपी ब्लॉक रहती है, इसलिए आपका पेस्ट किया डिक्लेरेशन हमेशा वैलिडेट होता है।