CSS3 बॉक्स छाया का उपयोग करते हुए 10 क्रिएटिव तकनीक
हमने पिछले कुछ वर्षों में CSS3 वेब विकास में जबरदस्त प्रगति देखी है। इंटरनेट के चारों ओर लोकप्रिय वेबसाइटों ने कई अनूठी शैलियों जैसे गोल कोनों और मोबाइल-उत्तरदायी मीडिया प्रश्नों को शामिल करना शुरू कर दिया है। लेकिन इससे भी महत्वपूर्ण बात यह है कि इसने रचनात्मक इंटरफेस के लिए कुछ ही मिनटों में प्रोटोटाइप बना दिया.
इस लेख में मैं साझा करना चाहता हूं शानदार CSS3 बॉक्स छाया डिजाइन से संबंधित 10 कोड स्निपेट. मैं समझाता हूं कि कोड कैसे काम करता है और आप प्रत्येक बॉक्स छाया को अपनी वेबसाइट पर कैसे लागू कर सकते हैं.
इन शैलियों को अन्य लोकप्रिय वेबसाइटों से महान डिजाइन प्रभाव के लिए जिम्मेदार ठहराया गया है। यह एक बेहतरीन उदाहरण है कि वर्तमान वेब डेवलपर वेब डिज़ाइन के भविष्य के लिए प्रभावशाली रुझान कैसे बना रहे हैं.
1. फिक्स्ड टॉप टूलबार
रोमानियाई सोशल मीडिया सेवा त्रिलिलु अपनी पूरी वेबसाइट पर एक अस्थायी टॉप टूलबार का उपयोग करती है। यह एक का उपयोग करके जल्दी से बनाया जा सकता है स्थिति: निश्चित; किसी भी शीर्ष बार तत्व पर संपत्ति। लेकिन यह अतिरिक्त बॉक्स छाया पूरे नए स्तर पर प्रभाव डालता है.
# सर्जन पद: निश्चित; ऊंचाई: 60 पीएक्स; चौड़ाई: 100%; शीर्ष: 0; बायां: 0; सीमा-शीर्ष: 5px ठोस # a1cb2f; पृष्ठभूमि: #fff; -मोज़-बॉक्स-छाया: 0 2px 3px 0px rgba (0, 0, 0, 0.16); -webkit- बॉक्स-छाया: 0 2px 3px 0px rgba (0, 0, 0, 0.16); बॉक्स-छाया: 0 2px 3px 0px rgba (0, 0, 0, 0.16); z- इंडेक्स: 999999; #banner h1 लाइन-ऊंचाई: 60px;
आप देखेंगे कि बॉक्स-शैडो प्रॉपर्टी वास्तव में एक काफी सरल मूल्य संयोजन के साथ स्थापित है। छाया बॉक्स के नीचे गिर जाएगी, और दोनों तरफ 3px से धुंधला हो जाएगा.
हम उपयोग कर सकते हैं RGBA () छाया पर मामूली अस्पष्टता लागू करने की विधि, इसलिए तत्व बहुत अंधेरा नहीं दिखाई देता है। यह एक सूक्ष्म जोड़ है जो निश्चित रूप से आपके आगंतुक का ध्यान आकर्षित करेगा.
- डेमो
2. उप-नेविगेशन ड्रॉपडाउन
यहाँ एक और रचनात्मक बॉक्स छाया विधि है जो एक स्केलर ड्रॉपडाउन उप-मेनू पर लागू होती है। जैसा कि आप शीर्ष मुख्य नेविगेशन लिंक में से प्रत्येक पर मँडराते हैं, उद्यमी पर भी ऐसा ही प्रभाव देखा जा सकता है। यह निश्चित रूप से कॉन्फ़िगर करने के लिए थोड़ा अधिक मुश्किल है लेकिन धैर्य के लायक है.
# बार प्रदर्शन: ब्लॉक; ऊंचाई: 45 पीएक्स; पृष्ठभूमि: # 22385a; पैडिंग-टॉप: 5 पीएक्स; मार्जिन-बॉटम: 150px; स्थिति: रिश्तेदार; # बार उल मार्जिन: 0 पीएक्स 15 पीएक्स; फ़ॉन्ट-परिवार: कैंडारा, कैलिब्री, "सेगो यूआई", सेगोए, एरियल, सैंस-सेरिफ़; #बार उल ली पृष्ठभूमि: # 22385a; प्रदर्शन क्षेत्र; फ़ॉन्ट-आकार: 1.2em; स्थिति: रिश्तेदार; बाईंओर तैरना; # बार उल ली एक प्रदर्शन: ब्लॉक; रंग: # fffff7; लाइन-ऊँचाई: 45px; फोंट की मोटाई: बोल्ड; गद्दी: 0px 10px; पाठ-सजावट: कोई नहीं; z-index: 9999; #bar ul li a: hover, #bar ul li a.selected color: # 365977; पृष्ठभूमि: #fff; बॉर्डर-टॉप-लेफ्ट-रेडियस: 3 पीएक्स; बॉर्डर-टॉप-राइट-रेडियस: 3 पीएक्स; -webkit-border-top-left-radius: 3px; -वेबकिट-बॉर्डर-टॉप-राइट-रेडियस: 3 पीएक्स; -मोज़-बॉर्डर-रेडियस-टॉपलेट: 3 पीएक्स; -मोज़-बॉर्डर-रेडियस-टॉपराइट: 3 पीएक्स; #bar ul .subnav प्रदर्शन: ब्लॉक; बायां: 14 पीएक्स; शीर्ष: 48 पीएक्स; z- इंडेक्स: -1; चौड़ाई: 500 पीएक्स; स्थिति: निरपेक्ष; ऊंचाई: 90 पीएक्स; बॉर्डर: 1px ठोस # edf0f3; सीमा-शीर्ष: 0; गद्दी: 10px 0 10px 10px; छिपा हुआ सैलाब; -मोज़-बॉर्डर-रेडियस-बॉटफ़ेल्ट: 3 पीएक्स; -मोज़-बॉर्डर-रेडियस-बॉटफ़ेल्ट: 3 पीएक्स; -webkit-border-bottom-left-radius: 3px; -वेबकिट-बॉर्डर-बॉटम-राइट-रेडियस: 3 पीएक्स; बॉर्डर-बॉटम-राइट-रेडियस: 3 पीएक्स; बॉर्डर-बॉटम-राइट-रेडियस: 3 पीएक्स; -मोज़-बॉक्स-छाया: 0px 2px 7px rgba (0,0,0,0.25); -webkit- बॉक्स-छाया: 0px 2px 7px rgba (0,0,0,0.25); बॉक्स-छाया: 0px 2px 7px rgba (0,0,0,0.25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (शक्ति = 3, दिशा = 180, रंग =" # 333333 ")"; फ़िल्टर: प्रोगिड: DXImageTransform.Microsoft.Shadow (शक्ति = 3, दिशा = 180, रंग = "# 333333");
चयनित या माउस होवर पर रंग बदलने के लिए नौसेना लिंक को स्टाइल किया जा सकता है। मैं लिंक पर और ड्रॉपडाउन मेनू बॉक्स पर कुछ गोल सीमाओं को भी जोड़ रहा हूं। यह चारों ओर कठिन किनारों के बजाय एक अच्छा लग रहा है। मैं इसका अच्छा उपयोग भी कर रहा हूं -एमएस फिल्टर तथा फिल्टर गुण जो पूरी तरह से इंटरनेट एक्सप्लोरर के स्वामित्व में हैं.
यदि आप एक पूर्ण नेविगेशन सिस्टम सेटअप करते हैं, तो आप पृष्ठ लोड होने के बाद प्रदर्शन सेट को कोई नहीं बदल सकते हैं और मेनू को छिपा सकते हैं। फिर कुछ jQuery का उपयोग करके आप .hover () ईवेंट को लक्षित कर सकते हैं और अपडेट की गई सामग्री के साथ सबनाव बार को प्रदर्शित कर सकते हैं.
- डेमो
3. ग्लॉसी शैडो बटन
यह संभवतः मेरी पसंदीदा शैलियों में से एक है क्योंकि यह पेज पर कितना गतिशील है, इस कारण से बना है। यदि आप नहीं बता सकते हैं, तो यह YouTube का होम पेज पर पाया जाने वाला छोटा नीला बटन है, जब आप पहली बार लॉगिन करेंगे.
ब्लूज़ color: #fff; चौड़ाई: 190 पीएक्स; ऊंचाई: 35 पीएक्स; कर्सर: सूचक; फ़ॉन्ट-परिवार: एरियल, ताहोमा, संस-सेरिफ़; फ़ॉन्ट-आकार: 1.0em; फोंट की मोटाई: बोल्ड; -मोज़-बॉर्डर-रेडियस: 2 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 2 पीएक्स; सीमा-त्रिज्या: 2 पीएक्स; सीमा-चौड़ाई: 1 पीएक्स; सीमा-रंग: # 0053a6 # 0053a6 # 000; पृष्ठभूमि-रंग: # 6891e7; पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # 4495e7 0, # 0053a6 100%); पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (शीर्ष, # 4495e7 0, # 0053a6 100%); पृष्ठभूमि-छवि: -o-linear-gradient (शीर्ष, # 4495e7 0, # 0053a6 100%); बैकग्राउंड-इमेज: -webkit-gradient (लीनियर, लेफ्ट टॉप, लेफ्ट बॉटम, कलर-स्टॉप (0, # 4495e7), कलर-स्टॉप (100%, # 0053a6)); पृष्ठभूमि-चित्र: -webkit-linear-gradient (शीर्ष, # 4495e7 0, # 0053a6 100%); पृष्ठभूमि-छवि: रैखिक-ढाल (नीचे से, # 4495e7 0, # 0053a6 100%); पाठ-छाया: 1px 1px 0 rgba (0, 0, 0, .6); -मोज़-बॉक्स-छाया: इनसेट 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: इनसेट 0 1px 0 rgba (256, 256, 256, .35); -webkit- बॉक्स-छाया: इनसेट 0 1px 0 rgba (256, 256, 256, .35); बॉक्स-छाया: इनसेट 0 1px 0 rgba (256, 256, 256, .35); फ़िल्टर: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6); .blues: होवर बॉर्डर-कलर: # 002d59 # 002d59 # 000; -मोज़-बॉक्स-छाया: इनसेट 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -ms-box-shadow: इनसेट 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -webkit- बॉक्स-छाया: इनसेट 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); बॉक्स-छाया: इनसेट 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, .25); फ़िल्टर: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # 3a8cdf 0, # 0053a6 100%); पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (शीर्ष, # 3a8cdf 0, # 0053a6 100%); पृष्ठभूमि-छवि: -o-linear-gradient (शीर्ष, # 3a8cdf 0, # 0053a6 100%); बैकग्राउंड-इमेज: -webkit-gradient (लीनियर, लेफ्ट टॉप, लेफ्ट बॉटम, कलर-स्टॉप (0, # 3a8cdf), कलर-स्टॉप (100%, # 0053a6); पृष्ठभूमि-चित्र: -webkit-linear-gradient (शीर्ष, # 3a8cdf 0, # 0053a6 100%); पृष्ठभूमि-छवि: रैखिक-ढाल (नीचे से, # 3a8cdf 0, # 0053a6 100%); .blues: सक्रिय बॉर्डर-रंग: # 000 # 002d59 # 002d59; -मोज़-बॉक्स-छाया: इनसेट 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #xf; -ms-box-shadow: इनसेट 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit- बॉक्स-छाया: इनसेट 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; बॉक्स-छाया: इनसेट 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; फ़िल्टर: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # 005ab4 0, # 175ea6 100%); पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (शीर्ष, # 005ab4 0, # 175ea6 100%); पृष्ठभूमि-छवि: -o-linear-gradient (शीर्ष, # 005ab4 0, # 175ea6 100%); बैकग्राउंड-इमेज: -webkit-gradient (लीनियर, लेफ्ट टॉप, लेफ्ट बॉटम, कलर-स्टॉप (0, # 005ab4), color-stop (100%, # 175ea6)) पृष्ठभूमि-छवि: -webkit- रैखिक-ढाल (शीर्ष, # 005ab4 0, # 175ea6 100%); पृष्ठभूमि-छवि: रैखिक-ढाल (नीचे से, # 005ab4 0, # 175ea6 100%);
पूरे बटन कोड को देखने के लिए बहुत कुछ है, लेकिन हम कोशिश कर रहे हैं अधिक से अधिक ब्राउज़रों का समर्थन करना. एमएस इंटरनेट एक्सप्लोरर 7+ के लिए समर्थन के साथ पाठ छाया और बॉक्स छाया हैं। हम भी सेट कर रहे हैं पृष्ठभूमि छवि CSS3 ग्रेडिएंट्स के साथ संपत्ति विशिष्ट विक्रेता के उपसर्गों की एक विस्तृत संख्या पर.
लेकिन अगर आपको यह डिजाइन स्टाइल पसंद है तो होवर और सक्रिय राज्य भी आपका ध्यान आकर्षित करेंगे. हम मूल रूप से सीमा को अपडेट कर रहे हैं ताकि आप अंदर धकेलने के लिए कुछ छाया शामिल कर सकें, जबकि पृष्ठभूमि ढाल को थोड़ा गहरा दिखाने के लिए.
चूंकि बटन पर कोई चित्र नहीं हैं, आप हेक्स मानों को अपडेट कर सकते हैं और व्यावहारिक रूप से किसी भी रंग योजना में मिश्रण करने के लिए इसे मॉर्फ कर सकते हैं.
- डेमो
4. सूचनाएं फ्लाईआउट मेनू
मैं फेसबुक का बड़ा उपयोगकर्ता नहीं हूं, लेकिन मैंने उनके रीडिज़ाइन से कुछ यूआई तकनीकों पर ध्यान दिया है। इस फ्लाईआउट मेनू की तुलना आपके नोटिफिकेशन या होमपेज पर पाए जाने वाले फ्रेंड रिक्वेस्ट पॉपअप से की जा सकती है.
.flyout चौड़ाई: 310px; मार्जिन-टॉप: 10 पीएक्स; फ़ॉन्ट-आकार: 11px; स्थिति: रिश्तेदार; फ़ॉन्ट-परिवार: 'लुसिडा ग्रांडे', तहोमा, वर्दाना, एरियल, संस-सेरिफ़; पृष्ठभूमि-रंग: सफेद; गद्दी: 9px 11px; पृष्ठभूमि: आरजीबीए (255, 255, 255, 0.9); बॉर्डर: 1px ठोस # c5c5c5; -webkit- बॉक्स-छाया: 0 3px 8px rgba (0, 0, 0, .25); -मोज़-बॉक्स-छाया: 0 3px 8px आरजीबीए (0, 0, 0, .25); बॉक्स-छाया: 0 3px 8px rgba (0, 0, 0, .25); -वेबकिट-बॉर्डर-त्रिज्या: 3 पीएक्स; -मोज़-बॉर्डर-रेडियस: 3 पीएक्स; सीमा-त्रिज्या: 3 पीएक्स; .flyout #tip बैकग्राउंड-इमेज: url ('images / tip.png'); बैकग्राउंड-रिपीट: नो-रिपीट; पृष्ठभूमि का आकार: ऑटो; ऊंचाई: 11 पीएक्स; स्थिति: निरपेक्ष; शीर्ष: -11 पीएक्स; बाएं: 25 पीएक्स; चौड़ाई: 20 पीएक्स; .flyout h2 टेक्स्ट-ट्रांसफ़ॉर्म: अपरकेस; रंग: # 666; फ़ॉन्ट-आकार: 1.2em; पैडिंग-बॉटम: 5 पीएक्स; मार्जिन-बॉटम: 12 पीएक्स; बॉर्डर-बॉटम: 1px सॉलिड #dcdbda; .flyout p गद्दी-तल: 25px; फ़ॉन्ट-आकार: 1.1em; रंग: # 222; यहां प्रदर्शित करने के लिए बहुत सारे नए दिमाग झुकने वाले कोड नहीं हैं। मैं एक छोटा सा उपयोग कर रहा हूं .टिप टूलटिप त्रिकोण को जोड़ने के लिए एक आंतरिक स्पैन तत्व के साथ वर्ग। शुद्ध CSS3 के त्रिकोण बनाना संभव है लेकिन यह तरीका आसान नहीं है, जैसा कि आप कल्पना कर सकते हैं। यदि आप इस विधि को पसंद करते हैं तो यह एक साथ कुछ हैक करने के लायक हो सकता है। लेकिन CSS3 के रोटेशन गुण हर जगह समर्थित नहीं हैं; इस बीच छवियों को किसी भी फ़ॉलबैक विधि की आवश्यकता नहीं होती है.
- डेमो
5. Apple पेज रैपर
कई प्रभावशाली CSS3 बॉक्स छाया हैं जो आप एप्पल की आधिकारिक वेबसाइट पर पा सकते हैं। नीचे दिया गया यह उदाहरण एक छोटा बॉक्स कंटेनर है जिसमें कुछ कॉलम स्पैन हैं। जब Apple के लेआउट को देखते हैं, तो आप कई आवरण बॉक्स से बने उनके कई पेज देखेंगे.
.ऐप्पलवैप चौड़ाई: 100%; प्रदर्शन क्षेत्र; ऊंचाई: 150 पीएक्स; पृष्ठभूमि: सफेद; सीमा: 1px ठोस; बॉर्डर-रंग: # e5e5e5 #dbdbdb # d2d2d2; -वेबकिट-बॉर्डर-त्रिज्या: 4 पीएक्स; -मोज़-बॉर्डर-रेडियस: 4 पीएक्स; सीमा-त्रिज्या: 4 पीएक्स; -webkit- बॉक्स-छाया: rgba (0, 0, 0, 0.3) 0 1px 3px; -मोज़-बॉक्स-छाया: आरजीबीए (0,0,0,0.3) 0 1px 3px; बॉक्स-छाया: आरजीबीए (0, 0, 0, 0.3) 0 1px 3px; .applewrap .col float: left; box-sizing: बॉर्डर-बॉक्स; चौड़ाई: 250px; ऊंचाई: 150 पीएक्स; गद्दी: 16px 7px 6px 22px; फ़ॉन्ट: १२ पीएक्स / १ Luc पीएक्स "ल्यूसिडा ग्रांडे", "ल्यूसिडा सैंस यूनिकोड", हेल्वेटिका, एरियल, वर्दाना, सेन्स-सेरिफ़; रंग: # 343434; बॉर्डर-राइट: 1px ठोस # दादा;
आप विभिन्न चौड़ाई और ऊंचाई के सामग्री बक्से द्वारा विभाजित एक समान पृष्ठ को एक साथ रख सकते हैं। हालाँकि मैंने कुछ कॉलम इस डेमो में डाले हैं लेकिन यह किसी भी तरह से एक आवश्यक प्रारूपण तकनीक नहीं है। बॉक्स छाया एक सफेद / ग्रे पृष्ठभूमि पर सबसे उपयुक्त होगा। लेकिन मुझे लगता है कि किसी भी हल्के रंग को प्रदर्शित करना बहुत अच्छा लगेगा.
- डेमो
6. Apple सामग्री बॉक्स
Apple की वेबसाइट पर कंटेंट बॉक्स की इस अन्य शैली का उपयोग ज्यादातर स्तंभ डिजाइन के लिए किया जाता है। ये मुख्य रूप से पृष्ठ प्रदर्शन सौदों और अन्य संबंधित सूचनाओं के नीचे हैं। यह पूरी तरह से अलग डिज़ाइन शैली है जिसमें ऊपर से नीचे की ओर बॉक्स की छाया प्रदर्शित होती है.
.ऐप्पबॉक्स चौड़ाई: ऑटो; ऊंचाई: 85 पीएक्स; box-sizing: बॉर्डर-बॉक्स; पृष्ठभूमि: # f5f5f5; गद्दी: 20 पीएक्स 20 पीएक्स 10 पीएक्स; मार्जिन: 10 पीएक्स 0 20 पीएक्स; बॉर्डर: 1px ठोस #ccc; सीमा-त्रिज्या: 4 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 4 पीएक्स; -मोज़-बॉर्डर-रेडियस: 4 पीएक्स; -ओ-सीमा-त्रिज्या: 4 पीएक्स; -webkit- बॉक्स-छाया: इनसेट 0px 1px 1px rgba (0, 0, 0, .3); -मोज़-बॉक्स-छाया: इनसेट 0px 1px 1px rgba (0, 0, 0, 3); बॉक्स-छाया: इनसेट 0px 1px 1px rgba (0, 0, 0, .3); .applebox .col चौड़ाई: 140px; बाईंओर तैरना; मार्जिन: 0 0 0 30px;
मुझे नहीं लगता कि इस कोड का अनुसरण करना और किसी अन्य डिव कंटेनर पर कॉपी करना बहुत मुश्किल होना चाहिए। केवल बॉक्स-छाया जो हम लागू कर रहे हैं वह उपयोग कर रहा है इनसेट आरजीबीए अल्फा-पारदर्शी रंग कोड के साथ। इसलिए हालांकि हमारे पास ड्रॉप ब्लैक है जो कि शुद्ध काले रंग के हैं, हम केवल 30% अपारदर्शिता दिखा रहे हैं.
- डेमो
7. चुनिंदा लिंक
यह शायद Apple की वर्तमान वेबसाइट से मेरी पसंदीदा बॉक्स छाया शैली है। आपको फ्लो लिंक लिंक की एक श्रृंखला के साथ iCloud पेज पर इस तकनीक की एक लाइव डेमो शैली मिलनी चाहिए.
.सेबफ़ेचर ऊँचाई: 150px; मार्जिन: 8 पीएक्स; ऊर्ध्वाधर-संरेखित करें: शीर्ष; प्रदर्शन: इनलाइन-ब्लॉक; .applefeature a डिस्प्ले: ब्लॉक; चौड़ाई: 168px; ऊंचाई: 140 पीएक्स; बॉर्डर: 1px ठोस #ccc; रंग: # 333; पाठ-सजावट: कोई नहीं; फोंट की मोटाई: बोल्ड; लाइन-ऊँचाई: 1.3em; पृष्ठभूमि: # f7f7f7; -webkit- बॉक्स-छाया: इनसेट 0 1px 2px rgba (0, 0, 0, .3); -मोज़-बॉक्स-छाया: इनसेट 0 1px 2px rgba (0, 0, 0, .3); बॉक्स-छाया: इनसेट 0 1px 2px rgba (0, 0, 0, .3); -वेबकिट-बॉर्डर-त्रिज्या: 4 पीएक्स; -मोज़-बॉर्डर-रेडियस: 4 पीएक्स; सीमा-त्रिज्या: 4 पीएक्स; .applefeature a: hover पृष्ठभूमि: #fafafa; पृष्ठभूमि: -webkit- ग्रेडिएंट (रैखिक, 0% 0%, 0% 100%, (#fff) से, (# f7f7f7)); पृष्ठभूमि: -मोज़-लीनियर-ग्रेडिएंट (100% 100% 90deg, # f7f7f7, #fff); -webkit- बॉक्स-छाया: इनसेट 0 1px 2px rgba (0,0,0, .3); -मोज़-बॉक्स-छाया: इनसेट 0 1px 2px rgba (0,0,0, .3); बॉक्स-छाया: इनसेट 0 1px 2px rgba (0,0,0, .3); -वेबकिट-बॉर्डर-त्रिज्या: 4 पीएक्स; -मोज़-बॉर्डर-रेडियस: 4 पीएक्स; सीमा-त्रिज्या: 4 पीएक्स; .applefeature एक img प्रदर्शन: ब्लॉक; मार्जिन: 26 पीएक्स ऑटो 4 पीएक्स; .applefeature a h4 प्रदर्शन: ब्लॉक; चौड़ाई: 160 पीएक्स; फ़ॉन्ट-आकार: 1.3em; फ़ॉन्ट-परिवार: एरियल, ताहोमा, संस-सेरिफ़; रंग: # 646464; पाठ-संरेखण: केंद्र;
इन विशेषताओं को एक निश्चित चौड़ाई पर सेट किया गया है और इसमें एक विशिष्ट आइकन और प्रदर्शन पाठ शामिल है। Apple का उदाहरण एक समान बॉक्स छाया का उपयोग करता है जैसा कि हमने पिछले सामग्री बॉक्स में देखा था। हालाँकि संपूर्ण बॉक्स अब लिंक के रूप में सक्रिय किया जा सकता है जिसमें दोनों शामिल हैं : मंडराना तथा : सक्रिय राज्यों। इस लिंक बॉक्स के साथ बहुत लचीलापन है और आपको स्रोत कोड के साथ खेलने की कोशिश करनी चाहिए.
ऊंचाई / चौड़ाई को छोटा करना और लिंक की बहुत छोटी सूची बनाना संभव है। ये एक लेख में अध्याय या पृष्ठों का एक सेट हो सकते हैं, या आप लिंक आइकन के साथ एक उप-मेनू को सीमित कर सकते हैं। यह ईमानदारी से नई CSS3 तकनीकों का एक बड़ा सेट है जो प्रदर्शित करता है कि आपके पास वेब डिजाइनर के रूप में कितनी शक्ति है.
- डेमो
8. फ़्रेम वाली छवियां
मैंने इस उदाहरण पर एक ग्रे पृष्ठभूमि जोड़ी है ताकि आप बॉक्स छाया शैलियों को अधिक स्पष्ट रूप से देख सकें। यह बॉक्स wordpress.com पर विशेष रुप से पूर्वावलोकन शॉट्स के समान है, सिवाय इसके कि मैंने स्रोत कोड में थोड़ी और गहराई जोड़ दी है.
.wpframe पृष्ठभूमि: #fff; सीमा-त्रिज्या: 2 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 2 पीएक्स; -मोज़-बॉर्डर-रेडियस: 2 पीएक्स; गद्दी: 8 पीएक्स; -webkit- बॉक्स-छाया: 1px 2px 1px # d1d1d1; -मोज़-बॉक्स-छाया: 1 पीएक्स 2 पीएक्स 1 पीएक्स # डी 1 डी 1 डी 1; बॉक्स-छाया: 1 पीएक्स 2 पीएक्स 1 पीएक्स # डी 1 डी 1 डी 1;
चूंकि छवियों को दोनों तरफ एक छोटी गद्दी दी जाती है, इसलिए यह फ्रेम एक बड़ी सफेद सीमा के रूप में दिखाई देता है। आप हमेशा पृष्ठभूमि का रंग अपडेट कर सकते हैं, या छवि को पृष्ठभूमि से अलग करने के लिए एक छोटी बाहरी सीमा भी जोड़ सकते हैं। लेकिन शैलियों का यह काफी सरल सेट विभिन्न बॉक्स छाया तकनीकों में पैंतरेबाज़ी किया जा सकता है। कोड के साथ चारों ओर खेलें और देखें कि आप अपनी वेबसाइट पर छवि डिजाइन कैसे सुधार सकते हैं.
- डेमो
9. ग्लोइंग इनपुट फील्ड्स
मुझे यह विचार कुछ समय के लिए Pinterest लॉगिन पृष्ठ पर जाने के बाद मिला। उनकी एनिमेटेड शैलियों वास्तव में कई इनलाइन बॉक्स छाया के कुछ स्पष्ट उदाहरण प्रदर्शित करती हैं, दोनों बाहर और इनसेट में.
.formwrap प्रदर्शन: ब्लॉक; मार्जिन-बॉटम: 15 पीएक्स; .formwrap लेबल डिस्प्ले: इनलाइन-ब्लॉक; चौड़ाई: 80 पीएक्स; फ़ॉन्ट-आकार: 11px; फोंट की मोटाई: बोल्ड; रंग: # 444; फ़ॉन्ट-परिवार: एरियल, ताहोमा, संस-सेरिफ़; .formwrap .shadowfield स्थिति: रिश्तेदार; चौड़ाई: 250px; फ़ॉन्ट-आकार: 17px; फ़ॉन्ट-परिवार: "हेल्वेटिका नीयू", एरियल, सेन्स-सेरिफ़; फ़ॉन्ट-वजन: सामान्य; पृष्ठभूमि: # f7f8f8; रंग: # 7c7c7c; लाइन-ऊँचाई: 1.4; गद्दी: 6 पीएक्स 12 पीएक्स; रूपरेखा: कोई नहीं; संक्रमण: सभी 0.2s आसानी से बाहर 0s; -वेबकैट-संक्रमण: सभी 0.2s आसानी से अंदर 0s; -मोज़-संक्रमण: सभी 0.2s आसानी से अंदर 0s; बॉर्डर: 1px ठोस # ad9c9c; बॉर्डर-त्रिज्या: 6px 6px 6px 6px; बॉक्स-छाया: 0 1px आरजीबीए (34, 25, 25, 0.2) इनसेट, 0 1 पीएक्स # एफएफ; .formwrap .shadowfield: फ़ोकस बॉर्डर-कलर: # 930; पृष्ठभूमि: #fff; रंग: # 5d5d5d; बॉक्स-छाया: इनसेट 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5); -मोज़-बॉक्स-छाया: इनसेट 0 1px आरजीबीए (34, 25, 25, 0.2), 0 1 पीपीएस आरजीबीए (255, 255, 255, 0.6), 0 0 7px आरजीबीए (235, 82, 82, 0.5); -webkit-box-shadow: इनसेट 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5);
हालाँकि प्रारंभिक शैलियाँ बहुत ही आकर्षक हैं लेकिन मैं इसके लिए तैयार हूँ प्रत्येक इनपुट क्षेत्र पर ध्यान केंद्रित करते हुए संक्रमण प्रभाव. आप उनके बीच टैब कर सकते हैं और इतने सारे गुणों में तत्काल अंतर देख सकते हैं। बाहरी चमक बॉक्स छाया एक अद्यतन इनसेट छाया के साथ लागू किया जाता है। यह भी जैसे ही आप किसी विशेष इनपुट पर ध्यान केंद्रित करते हैं, तब टेक्स्ट का रंग हल्का हो जाता है.
यहां तक कि इन प्रभावों में से एक पर कॉपी करने से आपके फॉर्म फ़ील्ड के उपयोगकर्ता अनुभव में बहुत सुधार होगा। सुनिश्चित करें कि आप उस बिंदु पर बहुत दूर नहीं जाते हैं जहाँ आपके रूप मुश्किल से उपयोग करने योग्य हैं। हालांकि अधिकांश आगंतुक मनभावन सौंदर्य प्रभावों का आनंद लेंगे जो आपकी वेबसाइट के साथ सहभागिता और आगे की भागीदारी को प्रोत्साहित करते हैं.
- डेमो
10. लोचदार छाया बटन
इन अद्वितीय छाया बटन को हॉवर और सक्रिय राज्यों के दौरान धीमी गति से संक्रमण के साथ स्टाइल किया गया है। आप मोज़िला होमपेज पर उनके बड़े के साथ इसी तरह के उदाहरण पा सकते हैं “फ़ायरफ़ॉक्स डाउनलोड करें” बटन। कुछ के डब्बे की छाया गुण वास्तव में एक कमांड में तीन अलग-अलग छायाओं को एक साथ जोड़ते हैं.
.ब्लू-बीटीएन डिस्प्ले: इनलाइन-ब्लॉक; -मोज़-बॉर्डर-रेडियस: .25em; सीमा-त्रिज्या: .25em; -वेबकैट-बॉक्स-छाया: 0 2px 0 0 rgba (0,0,0,0.1), इनसेट 0 -2px 0 0 rgba (0,0,0,0.2); -मोज़-बॉक्स-छाया: 0 2px 0 0 rgba (0,0,0,0.1), इनसेट 0 -2px 0 0 rgba (0,0,0,0.2); बॉक्स-छाया: 0 2px 0 0 rgba (0,0,0,0.1), इनसेट 0 -2px 0 0 rgba (0,0,0,0.2); पृष्ठभूमि-रंग: # 276195; पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (# 3c88cc, # 276195); पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (# 3c88cc, # 276195); पृष्ठभूमि-छवि: -webkit- ग्रेडिएंट (रैखिक, बाएं ऊपर, बाएं नीचे, रंग-स्टॉप (0%, # 3c88cc), रंग-रोक (100%, # 276195); पृष्ठभूमि-चित्र: -webkit-linear-gradient (# 3c88cc, # 276195); पृष्ठभूमि-छवि: -o-linear-gradient (# 3c88cc, # 276195); फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0"; पृष्ठभूमि-छवि: रैखिक-ढाल (# 3c88cc, # 276195); सीमा: 0; कर्सर: सूचक; रंग: #fff; पाठ-सजावट: कोई नहीं; पाठ-संरेखण: केंद्र; फ़ॉन्ट-आकार: 16 पीएक्स; गद्दी: 0px 20px; ऊंचाई: 40 पीएक्स; लाइन-ऊँचाई: 40 पीएक्स; न्यूनतम-चौड़ाई: 100px; पाठ-छाया: 0 1px 0 rgba (0,0,0,0.35); फ़ॉन्ट-परिवार: एरियल, ताहोमा, संस-सेरिफ़; -वेबकैट-संक्रमण: सभी रैखिक .2s; -मोज़-संक्रमण: सभी रैखिक .2s; -ओ-संक्रमण: सभी रैखिक .2s; -ms- संक्रमण: सभी रैखिक .2s; संक्रमण: सभी रैखिक .2s .blu-btn: hover, .blu-btn: फ़ोकस -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), insine "-2px 0 0 rgba (0,0,0,0.3), इनसेट 0 12px 20px 2px # 3089d8; -मोज़-बॉक्स-छाया: 0 2px 0 0 rgba (0,0,0,0.1), इनसेट 0 -2px 0 0 rgba (0,0,0,0.3), इनसेट 0 12px 20px 2px # 3089d8; बॉक्स-छाया: 0 2px 0 0 rgba (0,0,0,0.1), इनसेट 0 -2px 0 0 rgba (0,0,0,0.3), इनसेट 0 12px 20px 2px # 3089d8; .blu-btn: सक्रिय -webkit-box-shadow: इनसेट 0 2px 0 0 rgba (0,0,0,0.2), इनसेट 0 12px 20px 6px rgba (0,0,0,0.2), इनसेट 0 0 2px 2px rgba (0,0,0,0.3); -मोज़-बॉक्स-छाया: इनसेट 0 2px 0 0 rgba (0,0,0,0.2), इनसेट 0 12px 20px 6px rgba (0,0,0,0.2), इनसेट 0 0 2px 2px rgba (0,0,) 0,0.3); बॉक्स-छाया: इनसेट 0 2px 0 0 rgba (0,0,0,0.2), इनसेट 0 12px 20px 6px rgba (0,0,0,0.2), इनसेट 0 0 2px 2px rgba (0,0,0,0.3) ); .grn-btn प्रदर्शन: इनलाइन-ब्लॉक; -मोज़-बॉर्डर-रेडियस: .25em; सीमा-त्रिज्या: .25em; -वेबकैट-बॉक्स-छाया: 0 2px 0 0 rgba (0,0,0,0.1), इनसेट 0 -2px 0 0 rgba (0,0,0,0.2); -मोज़-बॉक्स-छाया: 0 2px 0 0 rgba (0,0,0,0.1), इनसेट 0 -2px 0 0 rgba (0,0,0,0.2); बॉक्स-छाया: 0 2px 0 0 rgba (0,0,0,0.1), इनसेट 0 -2px 0 0 rgba (0,0,0,0.2); पृष्ठभूमि-रंग: # 659324; पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (# 81bc2e, # 659324); पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (# 81bc2e, # 659324); पृष्ठभूमि-छवि: -webkit- ग्रेडिएंट (रैखिक, बाएं ऊपर, बाएं नीचे, रंग-स्टॉप (0%, # 81bc2e), रंग-रोक (100%, # 659324)); पृष्ठभूमि-चित्र: -webkit-linear-gradient (# 81bc2e, # 659324); पृष्ठभूमि-छवि: -o-linear-gradient (# 81bc2e, # 659324); फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0"; " पृष्ठभूमि-छवि: रैखिक-ढाल (# 81bc2e, # 659324); सीमा: 0; कर्सर: सूचक; रंग: #fff; पाठ-सजावट: कोई नहीं; पाठ-संरेखण: केंद्र; फ़ॉन्ट-आकार: 16 पीएक्स; गद्दी: 0px 20px; ऊंचाई: 40 पीएक्स; लाइन-ऊँचाई: 40 पीएक्स; न्यूनतम-चौड़ाई: 100px; पाठ-छाया: 0 1px 0 rgba (0,0,0,0.35); फ़ॉन्ट-परिवार: एरियल, ताहोमा, संस-सेरिफ़; -वेबकैट-संक्रमण: सभी रैखिक .2s; -मोज़-संक्रमण: सभी रैखिक .2s; -ओ-संक्रमण: सभी रैखिक .2s; -ms- संक्रमण: सभी रैखिक .2s; संक्रमण: सभी रैखिक .2s; .grn-btn: hover, .grn-btn: ध्यान -bbkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), इनसेट 0 -2px 0 0 rgba (0,0,0,0) , 0.3), इनसेट 0 12px 20px 2px # 85ca26; -मोज़-बॉक्स-छाया: 0 2px 0 0 rgba (0,0,0,0.1), इनसेट 0 -2px 0 0 rgba (0,0,0,0.3), इनसेट 0 12px 20px 2px # 85ca26; बॉक्स-छाया: 0 2px 0 0 rgba (0,0,0,0.1), इनसेट 0 -2px 0 0 rgba (0,0,0,0.3), इनसेट 0 12px 20px 2px # 85ca26; .grn-btn: सक्रिय -webkit-box-shadow: इनसेट 0 2px 0 0 rgba (0,0,0,0.2), इनसेट 0 12px 20px 6px rgba (0,0,0,0.2), इनसेट 0 0 2px 2px rgba (0,0,0,0.3); -मोज़-बॉक्स-छाया: इनसेट 0 2px 0 0 rgba (0,0,0,0.2), इनसेट 0 12px 20px 6px rgba (0,0,0,0.2), इनसेट 0 0 2px 2px rgba (0,0,) 0,0.3); बॉक्स-छाया: इनसेट 0 2px 0 0 rgba (0,0,0,0.2), इनसेट 0 12px 20px 6px rgba (0,0,0,0.2), इनसेट 0 0 2px 2px rgba (0,0,0,0.3) );
मैं hover और सक्रिय बटन राज्यों पर 200 मिलीसेकंड के लिए पूर्ण बदलाव का उपयोग कर रहा हूं। इन शैलियों के बारे में इतना महान है कि आप उन्हें लगभग किसी भी क्लिक करने योग्य तत्व पर लागू कर सकते हैं। बटन, लंगर लिंक, तत्व, या कुछ और जो आपको लगता है कि उपयुक्त है - हालांकि इन शैलियों का उपयोग बहुत कम किया जाना चाहिए ताकि आपके डिजाइन को अधिभार न डालें.
इस तरह के बटन अक्सर उसी तरीके से सबसे अच्छे रूप में सहेजे जाते हैं जैसे मोज़िला उनका उपयोग करता है। इन शैलियों को अपने ब्लॉग में संलग्न करें जहां आपके पास फ्रीबी डाउनलोड या कुछ इसी तरह के बटन हैं. उपयोगकर्ताओं को अद्वितीय इंटरफेस के साथ बातचीत करना पसंद है और यह अक्सर आपकी क्लिक-थ्रू रेटिंग के लिए बहुत अधिक प्रतिशत में बदल जाता है.
- डेमो
अंतिम विचार
मुझे आशा है कि आप बॉक्स छाया तकनीकों के इस संग्रह से कुछ महान सबक ले सकते हैं। ऐसे कई अलग-अलग क्षेत्र हैं जिन पर आप प्रपत्र, मोडल बॉक्स, बटन, टूलबार और यहां तक कि पूर्ण वेबसाइट लेआउट शामिल कर सकते हैं.
इन छाया प्रभावों में से किसी को भी अपनी वेबसाइट के भाग में लागू करने के लिए स्वतंत्र महसूस करें। वहाँ अन्य तकनीकों के बहुत सारे हैं, लेकिन यह संग्रह शुरुआती और उन्नत डेवलपर्स दोनों के लिए एकदम सही है। इसके अलावा, यदि आपके पास लेख के बारे में कोई सुझाव या प्रश्न हैं, तो आप नीचे टिप्पणी क्षेत्र में हमारे साथ साझा कर सकते हैं.
