"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > सीएसएस आकृतियाँ: आकृतियों के चारों ओर पाठ लपेटना

सीएसएस आकृतियाँ: आकृतियों के चारों ओर पाठ लपेटना

2024-11-09 को प्रकाशित
ब्राउज़ करें:475

CSS Shapes: Wrapping Text Around Shapes

परिचय

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

लाभ

  1. उन्नत दृश्य अपील: आकृतियों के चारों ओर पाठ लपेटने से दृश्य रुचि तुरंत बढ़ जाती है और एक डिज़ाइन को अलग बनाया जा सकता है।

  2. लचीला लेआउट: सीएसएस आकृतियों के साथ, टेक्स्ट को किसी भी आकार के चारों ओर लपेटा जा सकता है, जिससे डिजाइनरों को अद्वितीय और अपरंपरागत लेआउट बनाने की अधिक स्वतंत्रता मिलती है।

  3. बेहतर उपयोगकर्ता अनुभव: पाठ के आयताकार ब्लॉकों से अलग होकर, पाठकों को सामग्री के साथ जुड़ने की अधिक संभावना है और इसे पढ़ना आसान लगता है।

नुकसान

  1. सीमित ब्राउज़र समर्थन: सीएसएस शेप्स एक अपेक्षाकृत नई सुविधा है और सभी ब्राउज़र इसका पूरी तरह से समर्थन नहीं करते हैं, जो इसके उपयोग को सीमित कर सकता है।

  2. जटिल कार्यान्वयन: सीएसएस आकृतियों को लागू करना चुनौतीपूर्ण हो सकता है, खासकर शुरुआती लोगों के लिए, और उन्नत कोडिंग कौशल की आवश्यकता हो सकती है।

विशेषताएँ

  1. आकार-बाहरी संपत्ति: यह संपत्ति एक डिजाइनर को उस आकार को परिभाषित करने की अनुमति देती है जिसके चारों ओर पाठ लपेटा जाना चाहिए।

    .shape {
        shape-outside: circle(50%);
        width: 100px;
        height: 100px;
        float: left;
    }
    
  2. फ्लोट प्रॉपर्टी: फ्लोट प्रॉपर्टी का उपयोग करके, डिजाइनर तत्वों को स्थिति दे सकते हैं और नियंत्रित कर सकते हैं कि टेक्स्ट उनके चारों ओर कैसे लपेटता है।

    .floating {
        float: left;
        width: 50%;
    }
    
  3. आकार मार्जिन संपत्ति: यह संपत्ति पाठ और आकृति के बीच ऑफसेट या स्थान निर्दिष्ट करती है।

    .shape {
        shape-margin: 20px;
    }
    

निष्कर्ष

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

विज्ञप्ति वक्तव्य यह आलेख यहां पुन: प्रस्तुत किया गया है: https://dev.to/tailwine/css-shapes-wrapping-text-round-shapes-3nda?1 यदि कोई उल्लंघन है, तो कृपया इसे हटाने के लिए [email protected] से संपर्क करें।
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3