सीएसएस के साथ कट-आउट बॉर्डर डिज़ाइन कैसे बनाएं
के साथ कट-आउट बॉर्डर डिज़ाइन हम उपयोगकर्ताओं को दिखा सकते हैं कि क्या पाया जा सकता है एक HTML तत्व के सीमा क्षेत्र के नीचे. यह कार्य आमतौर पर द्वारा हल किया जाता है दो या अधिक ब्लॉक तत्वों को ढेर करना (ज्यादातर मामलों में div) विभिन्न आकारों के एक दूसरे के ऊपर। पहले यह एक सरल समाधान लगता है, लेकिन यह तब और अधिक निराशाजनक हो जाता है जब आप लेआउट को कई बार फिर से उपयोग करना चाहते हैं, तत्वों के चारों ओर घूमते हैं, मोबाइल के लिए डिज़ाइन का अनुकूलन करते हैं, या कोड बनाए रखते हैं.
इस पोस्ट में, मैं आपको एक सुरुचिपूर्ण सीएसएस-एकमात्र समाधान दिखाने जा रहा हूं जो उपयोग करता है केवल एक HTML तत्व उसी प्रभाव को प्राप्त करने के लिए। यह तकनीक पहुंच के लिए भी बढ़िया है, क्योंकि यह है सीएसएस में पृष्ठभूमि छवि लोड करता है, HTML से अलग हो गया.
इस पोस्ट के अंत तक, आपको पता चल जाएगा कि कैसे सीमा क्षेत्र में एक पृष्ठभूमि छवि प्रदर्शित करें बनाने के क्रम में कट-आउट बॉर्डर डिज़ाइन आप नीचे देख सकते हैं। मैं यह भी दिखाऊंगा कि आप डिज़ाइन को कैसे उत्तरदायी बना सकते हैं व्यूपोर्ट इकाइयों का उपयोग करना.
प्रारंभिक कोड
HTML फ्रंट में एकमात्र आवश्यकता है a ब्लॉक तत्व:
हमें करने की आवश्यकता होगी पुन: उपयोग आयाम (चौड़ाई और ऊंचाई) और सीमा चौड़ाई के मान div, इसलिए मैं उनका परिचय दे रहा हूं सीएसएस चर के रूप में. चर --w निरूपित करता है चौड़ाई का .सीबी ब्लॉक तत्व, --ज इसका संकेत देता है ऊंचाई, --ख के लिए चला जाता है सीमा चौड़ाई, तथा --b2 सीमा चौड़ाई के लिए 2. से गुणा किया जाता है। हम बाद में अंतिम चर का उपयोग देखेंगे.
मैं साइज़ कर रहा हूँ इकाई आइए पृष्ठभूमि को जोड़कर, और सीमा, ऊंचाई और चौड़ाई निर्धारित करके उपरोक्त कोड में सुधार करें हमारे पूर्वनिर्धारित सीएसएस चर का उपयोग करके. यहां बताया गया है कि डेमो को अभी कैसे देखा जाना चाहिए: हमें पृष्ठभूमि छवि की आवश्यकता है के पूरे क्षेत्र को कवर किया यदि आप पृष्ठभूमि छवि को एक निश्चित आकार देना चाहते हैं, तो सुनिश्चित करें कि आप जो आकार दे रहे हैं, वह सीमा क्षेत्र को कवर करने में सक्षम बनाता है पृष्ठभूमि छवि की चौड़ाई [ इसी तरह, पृष्ठभूमि छवि की ऊंचाई [ इस तरह, हमने पृष्ठभूमि की छवि को उस क्षेत्र में आकार दिया है जो आकार के समान है ध्यान दें: यदि आप में पैडिंग जोड़ रहे हैं अभी हमारे पास यही है: अब जबकि हमने पृष्ठभूमि छवि के साथ सीमा-समावेशी क्षेत्र को कवर कर लिया है, जो कि सभी शेष है सीमा के अंदर केंद्र क्षेत्र को कवर करें (सीमा-विशेष क्षेत्र) एक ठोस रंग के साथ, जिसके लिए हम एक तक पहुँचते हैं मूल्य के साथ क्षैतिज छाया कोडपेन डेमो में, आप छवि के चारों ओर एक सफेद सीमा देख सकते हैं। की एक प्रसिद्ध ट्रिक है कई बॉर्डर बनाने के लिए बॉक्स-शैडो का उपयोग करना-हम उसी तकनीक का उपयोग कर सकते हैं एक या अधिक ठोस रंग की सीमाएं जोड़ें हमारे डिजाइन के लिए. अद्यतन किया गया मेरे अंतिम कोडपेन डेमो में, मैंने पृष्ठभूमि छवि और बॉक्स-छाया रंग के लिए कोड रखा है एक अलग वर्ग में. ये है ऐच्छिक, लेकिन अगर आप चाहते हैं अत्यंत उपयोगी हो सकता है कट-आउट बॉर्डर डिज़ाइन के लेआउट का पुन: उपयोग करें कई तत्वों में, और स्वतंत्र रूप से प्रत्येक तत्व के लिए सौंदर्यशास्त्र (पृष्ठभूमि छवि + रंग) जोड़ें. मैंने नाम की एक क्लास जोड़ी है जबसे का मान निर्धारित करने के लिए चूंकि आयाम सभी इकाई में हैं ध्यान दें: भूलना मत व्यूपोर्ट मेटा टैग जोड़ें यदि आपने मोबाइल दृश्य के लिए इसे अनुकूलित करने का निर्णय लिया है तो अपने HTML पृष्ठ पर.VW इकाई (आप चाहें तो निश्चित इकाइयों का उपयोग कर सकते हैं). .cb --w: 35vw; --h: 40vw; - बी: 4 वीडब्ल्यू; --b2: कैल्क (var (- b) * 2);
त्वरित स्पष्टीकरण -
VW तथा VH इकाइयोंVW का प्रतिनिधित्व करता है 1/100वें व्यूपोर्ट की चौड़ाई. उदाहरण के लिए, 50vw व्यूपोर्ट की चौड़ाई का 50 भाग है 100 समान भागों में लंबवत कटा हुआ, जबकि 50vh व्यूपोर्ट ऊँचाई का 50 भाग है 100 समान भागों में क्षैतिज रूप से कटा हुआ. .cb --w: 35vw; --h: 40vw; - बी: 4 वीडब्ल्यू; --b2: कैल्क (var (- b) * 2); पृष्ठभूमि: url (bg.jpg); सीमा: var (- b) ठोस पारदर्शी; ऊँचाई: var (- h); चौड़ाई: var (- w);
पृष्ठभूमि छवि का आकार
पृष्ठभूमि मूल्य मैं यह दे रहा हूँ: .cb --w: 35vw; --h: 40vw; - बी: 4 वीडब्ल्यू; --b2: कैल्क (var (- b) * 2); पृष्ठभूमि: url (bg.jpg) केंद्र / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); सीमा: var (- b) ठोस पारदर्शी; ऊँचाई: var (- h); चौड़ाई: var (- w);
कैल्क (var (- w) + var (- b2))] का योग है div की चौड़ाई [वर (- डब्ल्यू)] और यह बाएँ और दाएँ सीमाओं की चौड़ाई [वर (- बी 2)].कैल्क (var (- h) + var (- b2))] का योग है div की ऊंचाई [वर (- ज)] और यह ऊपर और नीचे की सीमाओं की चौड़ाई [वर (- बी 2)].div (सीमा क्षेत्र सहित).केंद्र कीवर्ड पृष्ठभूमि छवि संरेखित करता है के केंद्र में div.div, स्मरण में रखना पैडिंग क्षेत्र शामिल करें पृष्ठभूमि के आकार के साथ ही, सीमा क्षेत्र के समान.
सीमा-विशेष क्षेत्र को कवर करें
डब्बे की छाया इनसेट. .cb --w: 35vw; --h: 40vw; - बी: 4 वीडब्ल्यू; --b2: कैल्क (var (- b) * 2); पृष्ठभूमि: url (bg.jpg) केंद्र / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); सीमा: var (- b) ठोस पारदर्शी; बॉक्स-छाया: इनसेट var (- w) 0 0 rgba (0,120,237, .5); ऊँचाई: var (- h); चौड़ाई: var (- w);
वर (- डब्ल्यू) की पूरी चौड़ाई को कवर करता है div. का उपयोग RGBA रंग समारोह की अनुमति देता है कुछ पारदर्शिता यदि आप केंद्र क्षेत्र को पूरी तरह से कवर करना चाहते हैं, तो मिश्रण में जोड़ा जा सकता है, हालांकि आप एक अपारदर्शी रंग का उपयोग भी कर सकते हैं.
के साथ एक अतिरिक्त सीमा जोड़ें
डब्बे की छायाडब्बे की छाया मूल्य है: .cb --w: 35vw; --h: 40vw; - बी: 4 वीडब्ल्यू; --b2: कैल्क (var (- b) * 2); पृष्ठभूमि: url (bg.jpg) केंद्र / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); सीमा: var (- b) ठोस पारदर्शी; बॉक्स-छाया: इनसेट var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) सफेद; ऊँचाई: var (- h); चौड़ाई: var (- w);
कैल्क (var (- b) / 2) फ़ंक्शन की छाया बनाता है सीमा चौड़ाई का आधा.
वैकल्पिक: अलग लेआउट और सौंदर्यशास्त्र
.poster1 को .poster1 --tbgc: rgba (0,120,237, .5); पृष्ठभूमि-छवि: url ("http://bit.ly/2eQBij2"); पृष्ठभूमि एक आशुलिपि संपत्ति है, इसके लॉन्गहैंड गुणों को व्यक्तिगत रूप से ओवरराइड / सेट किया जा सकता है. इसलिए, हम सेट कर सकते हैं पृष्ठभूमि छवि में .poster1, और से url मान निकालें पृष्ठभूमि में संपत्ति .सीबी.डब्बे की छाया, हम प्रयोग कर सकते हैं एक और सीएसएस चर. --tbgc परिवर्तनशील रंग मूल्य रखता है हम बॉक्स-छाया (डेमो में लाइटब्लू) को देना चाहते हैं, इसलिए शैली के नियमों के बीच .सीबी हम के रंग मूल्य को बदलें डब्बे की छाया के साथ संपत्ति वर (- tbgc). .cb --w: 35vw; --h: 40vw; - बी: 4 वीडब्ल्यू; --b2: कैल्क (var (- b) * 2); पृष्ठभूमि: केंद्र / कैल्क (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); सीमा: var (- b) ठोस पारदर्शी; बॉक्स-छाया: इनसेट var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) व्हाइट; ऊँचाई: var (- h); चौड़ाई: var (- w);
पोर्ट्रेट मोड के लिए कोड
VW, यह बहुत छोटा देखो जब आप पोर्ट्रेट मोड (ऊंचाई के सापेक्ष छोटी चौड़ाई) में डिज़ाइन देख रहे हों, तो सभी मोबाइल डिवाइस डिफ़ॉल्ट रूप से होते हैं। इस मुद्दे को हल, स्विच VW साथ में VH, तथा डिज़ाइन का आकार बदलें जैसा कि आप चित्र मोड के लिए फिट देखते हैं. @मीडिया (अभिविन्यास: चित्र) .cb --w: 35vh; --h: 40vh; - बी: 4 वीएच;
