बॉक्स शैडो विज़ुअली डिज़ाइन करें — ऑफसेट, ब्लर, स्प्रेड, रंग और ओपेसिटी एडजस्ट करें, और CSS कॉपी करें।
box-shadow प्रॉपर्टी फ्लैट एलिमेंट्स को गहराई देती है। यह पांच वैल्यू लेती है: हॉरिज़ॉन्टल ऑफसेट, वर्टिकल ऑफसेट, ब्लर रेडियस, स्प्रेड रेडियस, और रंग। बड़ी ब्लर और छोटे ऑफसेट वाली सूक्ष्म शैडो एलिवेशन के रूप में पढ़ी जाती है; मजबूत ऑफसेट वाली टाइट शैडो हार्ड एज के रूप में पढ़ी जाती है। डिज़ाइनर इन नंबरों को अनुभव से ट्यून करते हैं, जिसका मतलब है स्लाइडर्स खींचना और रिजल्ट देखना — ठीक यही यह टूल करता है।
बीच में प्रीव्यू बॉक्स शैडो दिखाता है जब आप स्लाइडर्स मूव करते हैं। नीचे की CSS लाइन रियल टाइम में अपडेट होती है: इसे कॉपी करें और अपनी स्टाइलशीट में पेस्ट करें। टूल inset शैडो भी सपोर्ट करता है, जो एलिमेंट के बाहर के बजाय अंदर पेंट करती हैं — प्रेस्ड बटन, इनपुट फील्ड और रिसेस्ड पैनल के लिए उपयोगी।
सब कुछ आपके ब्राउज़र में चलता है। प्रीव्यू एक div पर लागू असली CSS box-shadow है, कोई रेंडरिंग या अनुमान नहीं। आप यहां जो देखते हैं वही आपके उपयोगकर्ता देखेंगे।
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color
यह ब्लरिंग से पहले शैडो को फैलाता या सिकोड़ता है। पॉज़िटिव स्प्रेड शैडो को एलिमेंट से बड़ा बनाता है; नेगेटिव स्प्रेड इसे छोटा बनाता है। ज़ीरो का मतलब है शैडो एलिमेंट के समान आकार की है।
हां, CSS में। यह टूल एक शैडो जेनरेट करता है। और जोड़ने के लिए, अपनी स्टाइलशीट में उन्हें कॉमा से अलग करें।
यह एलिमेंट के बाहर के बजाय अंदर शैडो पेंट करता है। प्रेस्ड-स्टेट बटन या रिसेस्ड पैनल के लिए उपयोगी।
हां। शैडो एलिमेंट के border-radius को अपने आप फॉलो करती है।
क्योंकि ओपेसिटी स्लाइडर को अल्फा चैनल चाहिए। Hex रंग ओपेक हैं; rgba शैडो को सेमी-ट्रांसपेरेंट होने देता है, जो ज़्यादा नैचुरल दिखता है।
Vai.la किसी भी URL को क्लिक आंकड़ों, QR Code और आपके अपने बायोलिंक के साथ एक शॉर्ट लिंक में बदल देता है।
टूल्स का इस्तेमाल कैसे होता है या उनके परिणामों के आधार पर लिए गए निर्णयों के लिए Vai.la ज़िम्मेदार नहीं है।