🤙🏿 🔬 〽️ बॉक्स shadows.css 👩🏼‍🤝‍👨🏾 💪🏼 👧🏼

सभी को नमस्कार!

आधुनिक डिजाइन में, साइट और एप्लिकेशन बनाते समय, कई डेवलपर्स गहराई और मात्रा के प्रभाव को लागू करते हैं, अक्सर बॉक्स-छाया और ड्रॉप-छाया जैसी ऐसी सीएसएस गुणों का उल्लेख करते हैं। कुछ का मानना है कि 2018 में यह एक प्रवृत्ति है। वास्तव में, दोनों विदेशी और रूसी साइटों की एक बहुत हैं कि 2018 में अधिक बार छाया लागू करना शुरू कर दिया।

इस संबंध में, सरल और सुखद सीएसएस छाया का एक छोटा सा संग्रह , जो अक्सर वेबसाइटों पर पाया जाता है, हाल ही में दिखाई दिया है (प्लस या एक जोड़ी पिक्सेल की तरफ)। संग्रह को बॉक्स-शैडोज़ कहा जाता है। उसे पहले से ही नेटवर्क पर कुछ सकारात्मक समीक्षाएं मिली हैं और हाल ही में संस्करण 1.0.4 में अपडेट किया गया है, जिसमें कई और सुंदर छायाएं दिखाई दी हैं, जो समूहों में विभाजित हैं।

अंतिम अद्यतन के बाद, संग्रह में छाया के लिए 60 से अधिक प्रासंगिक विकल्प शामिल होने लगे, जो टेबल के उपयोग के लिए महान हैं, होम पेज, कंटेनरों, नेविगेशन बार और आपकी साइट के अन्य ब्लॉकों के लिए।

इस संग्रह को बनाने का मुख्य लक्ष्य नौसिखिया वेब डिजाइनरों और डेवलपर्स के काम को सुविधाजनक बनाने के लिए एक सुखद और आधुनिक डिजाइन तैयार करना है। संग्रह के लिए धन्यवाद, आप ब्लॉकों के साथ काम को सरल कर सकते हैं और जनरेटर में सीएसएस छाया का चयन करने के लिए समय कम कर सकते हैं (जो, वैसे, उपलब्ध भी है)। बेशक, अनुभवी डेवलपर्स को इसकी आवश्यकता होने की संभावना नहीं है, लेकिन शायद वे खुद के लिए कुछ दिलचस्प सीख सकते हैं। संग्रह उन लोगों के लिए उपयोगी है जो अभी तक लेआउट में पूरी तरह से सफल नहीं हुए हैं, लेकिन अपनी साइट के बटन, ब्लॉक और कंटेनरों पर सुंदर छाया बनाना चाहते हैं।

कनेक्ट शैलियों

एक स्टाइलशीट कनेक्ट करने के लिए , प्रोजेक्ट वेबसाइट पर जाएं और आपको जिस फ़ाइल की ज़रूरत है उसे डाउनलोड करें। फिर, फ़ाइल को अपने HTML पेज पर संलग्न करें, खुलने के बाद <head> टैग, आपके लिए सुविधाजनक विधि द्वारा।

<head> <link rel="stylesheet" href="/box-shadows.css"> <!-- or --> <link rel="stylesheet" href="/box-shadows.min.css"> </head>

आप min.css फ़ाइल जनरेटर का उपयोग कर सकते हैं, जो आपको केवल चयनित कक्षाओं से मिलकर अपनी फ़ाइल बनाने की अनुमति देता है। ठीक है, या बस उस ब्लॉक का चयन करें जिसकी आपको ज़रूरत है और अपनी साइट पर अपनी पसंद की छाया की प्रतिलिपि बनाएँ। यदि आपका प्रोजेक्ट दो या तीन से कम छाया का उपयोग करता है तो यह लोड को कम करने में मदद करेगा। बस साइट पर दिए गए निर्देशों का पालन करें और आप सफल होंगे।

कक्षाओं का उपयोग करना

वांछित छाया को अपने ब्लॉक से जोड़ने के लिए, बस .bhadow वर्ग को वांछित संख्या के साथ जोड़ें:

 <div class="bShadow-54"></div>

हॉवर प्रभाव

अपने ब्लॉक के लिए एक हॉवर इफ़ेक्ट बनाने के लिए, जिस क्लास को आप संख्या के साथ पसंद करते हैं, उदाहरण के लिए, .bhadow-1 जोड़ें और संख्या के बाद लैटिन अक्षर h लिखें। उदाहरण के लिए:

 <div class="bShadow-38 bShadow-1h"></div>

.BShadow वर्ग उदाहरण पर एक नज़र डालें। होवर पर, यह पड़ोसी वर्ग .bShadow-1 को छाया मान प्रदान करता है। यदि आप चाहते हैं कि जब आप हॉवर करें या उस पर क्लिक करें, तो .bSnone क्लास को जोड़ें

चिकना परिवर्तन और एनीमेशन

डिफ़ॉल्ट रूप से .bShadow वर्ग .2s ट्रांस्फ़ॉर्म में सुगम एनीमेशन का उपयोग करता है transition: transform 0.2s ease-in-out ट्रांसफ़ॉर्म करता transition: transform 0.2s ease-in-out , और इसमें एक प्रॉपर्टी भी शामिल होती है जो ब्राउज़र को आगामी छाया और स्थिति परिवर्तन will-change: transform, box-shadow; बारे में चेतावनी देती है will-change: transform, box-shadow; ।

अपने ब्लॉकों के सुंदर एनिमेशन बनाने के लिए इसका उपयोग करें। उदाहरण के लिए, आप एक परिवर्तन के साथ अपनी कक्षा या गुण जोड़ सकते हैं:

 .transform-translateY-5:hover { -webkit-transform: translateY(-5px) translateZ(0); transform: translateY(-5px) translateZ(0); }

फिर, उस कंटेनर में जोड़ें जिसकी आपको आवश्यकता है:

<div class="bShadow transform-translateY-5 bShadow-1h"> </div> और आपको परिणाम दिखाई देगा

इनसेट पैरामीटर जोड़ना

एक आंतरिक छाया पैरामीटर जोड़ने के लिए, बस स्क्रिप्ट को html पेज में पेस्ट करें और उन कक्षाओं को निर्दिष्ट करें जिनके लिए आप इसे लागू करना चाहते हैं।

उदाहरण के लिए .bShadow-1 । कई वर्गों को निर्दिष्ट करने के लिए, उन्हें कॉमा के साथ अलग करें, जैसा कि नीचे दिए गए उदाहरण में है। कक्षा को समाप्त करने के लिए मत भूलना!

 [].forEach.call(document.querySelectorAll('.bShadow-1, .bShadow-2h, .bShadow-3'), function(node) { var bsh = getComputedStyle(node).boxShadow; node.style.boxShadow = "inset " + bsh; });

डेमो

सीएसएस बॉक्स-छाया जनरेटर

संग्रह का तात्पर्य स्वयं उपयोगकर्ता द्वारा बनाई गई छाया के साथ कक्षाओं की संख्या में वृद्धि भी है। यही है, आप अपनी खुद की शैलियों के साथ संग्रह को पूरक करने के लिए क्लासिक छाया जनरेटर का उपयोग कर सकते हैं। Save and Add Next बटन पर क्लिक करके, आप अनंत संख्या में कक्षाएं बना सकते हैं। पहली उत्पन्न और बाद की कक्षाओं को एक क्रम संख्या दी गई है जो संग्रह में नहीं है। परिणामी शैलियों को आसानी से कॉपी किया जा सकता है और आपकी परियोजना की रूट सीएसएस फ़ाइल या संग्रह साइट पर बनाई गई बॉक्स-शैडो.min.css फ़ाइल में चिपकाया जा सकता है।

अब हम संग्रह का विस्तार करने और npm पैकेज को कॉन्फ़िगर करने की योजना बना रहे हैं, लेकिन इसके साथ कुछ छोटी कठिनाइयाँ भी हैं। इसलिए, जबकि मैं cdnjs लिंक और परियोजना के आगे विकास प्राप्त करने की उम्मीद करता हूं ।

GitHub · वेबपेज