परिचय

कुछ साल पहले तक यदि आप किसी वेबसाइट के पृष्ठभूमि आकार या अनुभाग चाहते थे जो आयतों के अलावा कुछ भी हों तो आपको संभवतः एक स्थिर पीएनजी या जेपीईजी छवि प्रदान करने के लिए एक डिजाइनर की आवश्यकता होती थी जिसे आवश्यकतानुसार जोड़ा जाएगा, लेकिन सीएसएस ने ऐसा किया है तब से एक लंबा सफर तय किया है, मेरे दोस्तों।

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

अब मैं डिज़ाइनर से मेरे लिए ऐसा करने के लिए एक पृष्ठभूमि छवि बनाने के लिए कह सकता था, लेकिन इसके बजाय मैं यह देखना चाहता था कि क्या मैं इसे सीएसएस की शक्ति से स्वयं कर सकता हूं। और देखो, मैं सीएसएस क्लिप-पाथ के साथ ऐसा कर सकता हूं।

डोम में दिलचस्प आकार और दृश्य अब पूरी तरह से डिजाइनरों का डोमेन नहीं हैं, सीएसएस क्लिप-पाथ जैसे टूल के साथ, डेवलपर्स के पास तत्वों को दोबारा आकार देने की शक्ति है और मैं आपको दिखाऊंगा कि कैसे।

सीएसएस क्लिप-पथ

यदि आप मेरी तरह सीएसएस क्लिप-पाथ प्रॉपर्टी से कम परिचित हैं, तो यह एक क्लिपिंग क्षेत्र बनाता है जो सेट करता है कि किसी तत्व के कौन से हिस्से दिखाए जाने चाहिए। जो हिस्से क्षेत्र के अंदर हैं वे दिखाए गए हैं, जबकि जो हिस्से बाहर हैं वे छिपे हुए हैं।

एमडीएन क्लिप-पाथ डॉक्स से एक डेमो। विभिन्न क्लिप-पथ विकल्प गर्म हवा के गुब्बारे और पाठ के विभिन्न दृश्य प्रदान करते हैं।

क्लिप-पथ संपत्ति विभिन्न प्रकार के मान स्वीकार कर सकती है:

• , जो परिभाषित क्लिपिंग पथ के साथ एसवीजी तत्व के लिए यूआरएल जैसे मान स्वीकार करता है।
• , जो मार्जिन-बॉक्स और बॉर्डर-बॉक्स जैसे मान स्वीकार करता है।
• , जो सर्कल() और रेक्ट() जैसे मानों को स्वीकार करता है।
• वैश्विक-मूल्य, जो इनहेरिट और रिवर्ट जैसे मूल्यों को स्वीकार करता है।

और मानों को एक क्लिप-पथ में एक साथ भी जोड़ा जा सकता है।

/* this CSS combines two different clip path properties */
clip-path: padding-box circle(50px at 0 100px);

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

क्लिप-पथ द्वारा स्वीकार किए जाने वाले गुणों में से एक बहुभुज() है, और यह वह समाधान है जिसकी मुझे अपने झुके हुए पृष्ठभूमि अनुभाग के लिए आवश्यकता थी।

मुझे सीएसएस के साथ बहुभुज को फिर से बनाने की आवश्यकता थी

ग्रे बहुभुज पृष्ठभूमि जो मुझे सीएसएस के साथ बनाने की आवश्यकता थी।

उपरोक्त छवि ग्रे पृष्ठभूमि अनुभाग का एक स्क्रीनशॉट है जिसे मुझे सीएसएस क्लिप-पथ की बहुभुज() संपत्ति के साथ फिर से बनाने की आवश्यकता है। और पहली चीज़ जो मुझे करने की ज़रूरत थी वह सीएसएस को लागू करने के लिए कुछ HTML तत्व बनाना था।

बहुभुज() क्लिप-पथ बनाम रेक्ट() क्लिप-पथ

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

HTML और CSS सेट करें

जिस साइट पर मैं काम कर रहा था वह स्टैटिक साइट जेनरेटर ह्यूगो, एक गो-आधारित फ्रेमवर्क पर निर्भर थी। ह्यूगो साइट के HTML को प्रस्तुत करने के लिए टेम्प्लेट का उपयोग करता है, इसलिए यदि आप HTML जानते हैं तो नीचे दिया गया उदाहरण कोड आपको अपेक्षाकृत परिचित लगेगा।

टेम्पलेट्स पर एक नोट:

यदि आपने कभी JSX घटकों का उपयोग किया है, तो पग या हैंडलबार के साथ Node.js, या जेकेल - ह्यूगो के टेम्प्लेट समान हैं: जहां भी टेम्प्लेट हैं, वहां सही जानकारी प्रस्तुत करने के लिए गो वेरिएबल्स और फ़ंक्शन के साथ HTML तत्व छिड़के गए हैं। इंजेक्ट किया जाता है।

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

single.html

  

    

    

        

          

              

                Lorem ipsum dolor
              
              

                Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque.
              
              

                Duis aute irure dolor in reprehenderit
              
              

                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et.
              
          
          

            
        
      
    

कोड का यह खंड अपेक्षाकृत संक्षिप्त है, लेकिन यह चर्चा का पात्र है। HTML तत्वों के अलावा, कुछ CSS कक्षाएं हैं जो बूटस्ट्रैप लाइब्रेरी से आती हैं, जो प्रतिक्रियाशील वेब डिज़ाइन के लिए मूल ओपन सोर्स CSS फ्रेमवर्क में से एक है।

अबाउट-बॉडी जैसी कस्टम कक्षाओं में, जिनका उपयोग मैंने कस्टम स्टाइलिंग जोड़ने के लिए किया था, कंटेनर, पंक्ति, कोल-12 या कोल-एमडी-6, एमबी-5, और एमबी-3 जैसी कक्षाएं हैं।

बाद की सभी कक्षाएं बूटस्ट्रैप कक्षाएं हैं, जो व्यूपोर्ट एक निश्चित चौड़ाई (कॉल-एमडी -6) से अधिक होने पर ऑनस्क्रीन टेक्स्ट और छवि तत्वों को पृष्ठ की चौड़ाई साझा करने या मार्जिन-बॉटम लागू करने का काम करती हैं।

टैग के लिए एक निश्चित राशि (एमबी-3 या एमबी-5)।

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

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

पहेली-अनुभाग को आकार देने के लिए सीएसएस क्लिप-पथ जोड़ें

चूंकि मुझे पूरा यकीन नहीं था कि एक सामान्य, आयताकार

.about-body {
  // this white sets the white background color for the whole webpage
  background-color: white; 

  .puzzle-section {
    // clip-path code copied from the clip-path maker website
    clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);
    background-color: light-grey;
    padding: 2rem 0 10rem 0;
  }
}