टास्क पथ / इनपुट से परिणाम तक
CSS बॉक्स शैडो कैसे बनाएं
- 01
शैडो की स्थिति तय करें
1–8 छाया परतें · X/Y (px): −100…100 · धुंधलापन (px): 0–100 · विस्तार (px): −100…100 · रंग · अपारदर्शिता: 0–1 · inset
- 02
ब्लर और स्प्रेड ट्यून करें
एक से आठ छाया परतें; प्रत्येक का विस्थापन, धुंधलापन, फैलाव, रंग, अपारदर्शिता और inset अलग रखें।
- 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 डाउनलोड करें। जब तक कोई मान रेंज से बाहर है कॉपी ब्लॉक रहती है, इसलिए आपका पेस्ट किया डिक्लेरेशन हमेशा वैलिडेट होता है। HTML में वर्तमान CSS और कार्यशील उदाहरण है। मूल नियंत्रण कीबोर्ड इनपुट का समर्थन करते हैं।