सीएसएस आईशैडो का संग्रह बॉक्स-छाया

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

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



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

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

बॉक्स shadows.css

Box-shadows.css आपकी परियोजनाओं के लिए सरल और अच्छी सीएसएस छाया (बॉक्स-छाया) का एक संग्रह है। मुख्य वर्ग सरल .bhadow वर्ग का उपयोग करता है। अब संग्रह में एक संख्या के साथ छाया के लिए 50 से अधिक प्रासंगिक विकल्प शामिल हैं, साथ ही साथ तीन अलग-अलग कक्षाएं .bShadow , .bhadow- लाइट और .bhadow-inset । वे होम पेज, कंटेनरों, नेविगेशन और आपकी साइट के अन्य ब्लॉकों की सामग्री के लिए तालिकाओं में उपयोग के लिए महान हैं।

कई प्रश्नों को दबाते हुए , मैं तुरंत बताऊंगा कि संख्याओं का उपयोग क्यों किया जाता है, और bhadhad-01040-00 जैसे नाम या वर्ग नहीं।
संग्रह स्वतंत्र नामों का उपयोग नहीं करता है, क्योंकि यह animate.css में किया जाता है, क्योंकि इस परियोजना के लिए यह थोड़ा अस्वीकार्य है। विभिन्न विचलन के साथ ब्लॉकों की छाया बढ़ती है, और संख्याओं के अनुक्रम के कारण आप व्यक्तिगत नामों को याद किए बिना, अपने लिए सबसे अच्छा विकल्प चुन सकते हैं। यह संग्रह के साथ काम को बहुत सरल करता है।

संग्रह में कई अन्य विशेषताएं हैं , उदाहरण के लिए, छाया के बीच चिकनी स्विचिंग के साथ, हॉवर प्रभाव का उपयोग।

अतिरिक्त कार्य

प्रोजेक्ट साइट नेत्रहीन सरल है, लेकिन इसमें आवश्यक कक्षाओं और शैलियों को पूरी तरह से अनुकूलित और चुनने के लिए पर्याप्त कार्य हैं। साइट अंग्रेजी में लिखी गई है, लेकिन उन लोगों के लिए जो अभी तक इस भाषा में धाराप्रवाह नहीं हैं, रूसी के लिए एक स्विच है।

छाया चयन

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

Min.css फ़ाइल जनरेटर

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

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

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



प्रयोग करके देखें। यह वास्तव में दिलचस्प काम है।
Cdnjs के लिंक के लिए अब विकास का काम चल रहा है और GitHub पर 200 सितारों का एक सेट है। मैं आपके सुखद उपयोग और रचनात्मक सफलता की कामना करता हूं। यदि आपके पास परियोजना में सुधार के लिए सुझाव, टिप्पणियां या सुझाव हैं, तो टिप्पणियों में लिखें।



GitHub · वेबसाइट