कैसे सीएसएस के साथ धराशायी सीमा चेतन करने के लिए

सजाए गए बॉर्डर पृष्ठ पर किसी भी तत्व को सजाना कर सकते हैं, लेकिन स्टाइल की बात आने पर सीएसएस सीमाएं सीमित हैं। डेवलपर्स अक्सर सीएसएस-ग्रेडिएंट बॉर्डर्स, एसवीजी बॉर्डर, मल्टीपल बॉर्डर और अधिक जैसे समाधानों के साथ आते हैं और बॉक्स बॉर्डर और इसके एनिमेशन की नकल करते हैं।.

आज हम धराशायी सीमाओं के लिए एक सरल हैक में देखेंगे: धराशायी सीमा एनीमेशन। एनिमेटेड धराशायी सीमा का उपयोग करके ही बनाया जाएगा रूपरेखा तथा डब्बे की छाया, कमियों के बारे में कोई उपद्रव नहीं छोड़ रहा है रूपरेखा IE8 से समर्थित है। इस तरह से उपयोगकर्ता एसवीजी या ग्रेडिएंट का उपयोग करने के विपरीत सीमाओं को देख पाएंगे। इसके साथ ही आप bicolored डैश भी बना सकते हैं। चलो एक नज़र डालते हैं.

सीमाओं का निर्माण

हम सबसे पहले सीमाओं का निर्माण करेंगे। इसके लिए, हम एक धराशायी रूपरेखा और एक बॉक्स छाया का उपयोग करेंगे.

 .बैनर रूपरेखा: ६ पीएक्स धराशायी पीला; बॉक्स-छाया: 0 0 0 6px # EA3556;… 

रूपरेखा इसके सभी मूल्यों की आवश्यकता होगी; चौड़ाई, प्रकार और रंग। डब्बे की छाया के लिए केवल मूल्य की आवश्यकता है फैलाना जो रूपरेखा की चौड़ाई और उसके रंग के समान होना चाहिए। रूपरेखा और बॉक्स-छाया दोनों एक साथ दो-रंगीन डैश का प्रभाव पैदा करेंगे.

तब आप अपने इच्छित बॉर्डर लुक के लिए बॉक्स की चौड़ाई या ऊंचाई समायोजित कर सकते हैं.

सीमाओं को एनिमेटेड

हमारे पहले एनीमेशन उदाहरण के लिए, हम सीएसएस कीफ़्रेम एनिमेशन को सीमाओं के एक सेट में सीमाओं के साथ जोड़ेंगे, जो निरंतर रूप से एनिमेट कर रहा है। एनीमेशन प्रभाव के लिए हम केवल रूपरेखा और बॉक्स छाया के रंगों को स्वैप करेंगे.

@keyframes animateBorder को बाह्यरेखा-रंग: # EA3556; बॉक्स-छाया: 0 0 0 6px पीला; 

आप का उपयोग करके रूपरेखा के रंग को लक्षित कर सकते हैं रूपरेखा रंग लॉन्गहैंड प्रॉपर्टी, हालांकि बॉक्स शैडो के लिए आपको शॉर्टहैंड प्रॉपर्टी के सभी मूल्य अभी देने होंगे.

एक बार एनीमेशन तैयार हो जाने के बाद, इसे बॉक्स में जोड़ें.

.बैनर रूपरेखा: ६ पीएक्स धराशायी पीला; बॉक्स-छाया: 0 0 0 6px # EA3556; एनीमेशन: 1s चेतन अनंत ...?

सीमाओं पर संक्रमण

संक्रमण के उदाहरण के लिए हम चित्रों में सीमाओं को जोड़ेंगे और होवर पर उन्हें चेतन करेंगे। आप विभिन्न प्रभावों के लिए सीमा आकार भी बदल सकते हैं.

.तस्वीरें रूपरेखा: 20 पीएक्स # 006DB5 धराशायी; बॉक्स-छाया: 0px 0px 0px 20px # 3CFDD3; संक्रमण: सभी 1s;… .photos: होवर बाह्यरेखा-रंग: # 3CFDD3; बॉक्स-छाया: 0 0 0 20px # 006DB5; 

अब, इन चित्रों पर होवर अपनी सभी सीमांत महिमा में अपनी सीएसएस धराशायी सीमाओं को देखने के लिए.

और कहा कि लपेटो। आप बिंदीदार सीमाओं को बिंदीदार लोगों के साथ बदलने की कोशिश कर सकते हैं, लेकिन प्रभाव आसार अच्छा नहीं हो सकता है। आप एनीमेशन के दौरान कुछ और प्रभावों के लिए रूपरेखा प्रकार भी बदल सकते हैं.