Advertisement
  1. Web Design
  2. CSS
Webdesign

CSS shapes को अगले स्टार पर ले जाना

by
Difficulty:IntermediateLength:ShortLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

पिछले टुटोरिअल में, हमने CSS shapes को बनाने की एक झलक देखी, जो हमे एलिमेंट की सही शेप बनाने की अनुमति देता है. हमने बेसिक्स को स्पर्श किया; एक गोलाकार बनाना ओर टेक्स्ट की कुछ लाइन्स को उसके चारो ओर लपेटना. आईये अब और जटिल shapes का पता लगाएं, अपने पेज के लेआउट को संपन्न ओर कम बक्सानुमा (boxy) बनाएं.

एक बहुभुज (Polygon) बनाना

वृत (circles) और आयत (rectangles) जैसे सरल आकार (shapes) से बढ़कर हम बहुभुज (polygons) भी बना सकते हैं; अधिक सिरो से मिल कर (आम तौर पर पांच या उससे अधिक) बने आकार, जैसे की एक पंचभुज (pentagon) या एक षटकोण(hexagon). यह बनाने के लिए, हम CSS का polygon() फंक्शन का प्रयोग करते हैं जो की एक से अधिक अल्पविराम से अलग की गयी वैल्यू (comma-separated values) जो की आकार के coordinates निर्धारित करते हैं को लेता है..

ऊपर दिए गए कोड के साथ, हमने पांच coordinate जोड़े, जिसने पंचकोण (pentagon) का आकार बनाया. फंक्शन में एक और coordinate जोड़ने पर आकार षटकोण (hexagon) हो जायेगा, एक और जोड़ने पर सप्तभुज (heptagon), और एक जोड़ने पर अष्टभुज (octagon) तथा इसी तरह आगे बढ़ता जायेगा.

बहुभुज (polygon) आकार बनाना एक वृत (circle) या एक अंडाकार (ellipse) बनाने के सामान आसान नहीं है, खासतौर पर अगर बहुभुज (polygon) जटिल हो और उसमे दर्जनों coordinates शामिल हो. सौभाग्ये से, एक आसान टूल (tool) है जो की CSS में आकार (shape) बनाना सहज (intuitive) बनाता है.

CSS के शेप एडिटर (Shapes Editor) का प्रयोग करना

CSS का शेप एडिटर क्रोम (Chrome) का एक एक्सटेंशन (extension) है. एक बार आप इसे इंस्टाल कर लेते हैं तो यह एलिमेंट्स टैब के अंदर DevTools में Shapes नाम का नया टैब दूसरे sub-tabs (Styles, Computer, आदि.) के साथ एक जोड़ देगा.

Shapes टैब में एक shape-outside नाम की प्रॉपर्टी होती है जिसमे एक प्लस + का चिन्ह होता है जो हमारी CSS Shape फंक्शन को जोड़ने में मदद करता है. आईये polygon() और पेज पर एलिमेंट को सेलेक्ट करते हैं, अब हम सीधा ब्राउज़र में ही शेप ड्रा करना शुरू कर सकते हैं जैसा की ग्राफ़िक्स एप्लीकेशन में होता है.

जैसे ही हम ड्रा करते हैं, ब्राउज़र का एक्सटेंशन हमारे polygon फंक्शन को draw की गए शेप के सम्बंधित कोऑर्डिनटस (coordinates) के साथ अपडेट कर देगा, साथ ही साथ इसे एलिमेंट के inline स्टाइल की तरह जोड़ देगा. एक बार हो जाये तो, जनरेटेड कोड को कॉपी करें और अपनी stylesheet में पेस्ट कर दें.

generated polygon coordinates
polygon के जनरेटेड coordinates

इसी तकनीक का प्रयोग करके हम आसानी से ड्रा कर सकते हैं और अपने वेबपेज पर किसी भी फॉर्म या शेप पर इसे लागू कर सकते हैं, उदाहरण के लिए:

Adobe Photoshop के साथ Rainy Scene में Drama कैसे जोड़े से ली गयी image

इमेज की शेप को निकालना (Extracting the Image Shape)

एक और संभव वैल्यू का प्रयोग हम shape-outside प्रॉपर्टी के url() फंक्शन में कर सकते हैं; यह वही फंक्शन है जिसका प्रयोग हम CSS में कंही और बैकग्राउंड इमेज को जोड़ने के लिए करते हैं. इस स्थिति में url() फंक्शन shape-outside प्रॉपर्टी को इमेज के आधार पर एलिमेंट की शेप परिभाषित (define) करने के लिए सक्षम (enable) करता है 

जब आपके पास बहुत सारे घुमाव और कोनो (curves and corners) के साथ एक विशेष जटिल ग्राफ़िक हो और आप अपने कंटेंट को चारो और आसानी से wrap करना चाहते हो, तो आप शायद polygon() की जगह url() फंक्शन का प्रयोग करना चाहेंगे. या, जब हम यूजर द्वारा उत्पन्न कंटेंट के साथ काम करते हैं जिसमे अकार को परिभाषित करना काफी उलझन भरा हो सकता है.

हम Unsplash में से यह macaw parrot का प्रयोग करने वाले हैं. सबसे पहले, आपको transparency के साथ इस version को बनाना होगा, उदाहरण के लिए:

the shape of our macaw
हमारे macaw parrot का अकार (shape)

Parrot की असली इमेज कंटेनर (container) में बैकग्राउंड इमेज (background image) की तरह जोड़ दी जाती है:

पारदर्शिता की सीमा (Transparency Threshold)

खुद shape के लिए, हम इसको कंटेनर के अंदर दुसरे एलिमेंट में जोड़ देंगे, और इस बार हम एक और CSS Shape की प्रॉपर्टी का प्रयोग करेंगे जो की shape-image-threshold कहलाती है.

खासतौर पर यह प्रॉपर्टी न्यूनतम पारदर्शिता की सीमा सेट करती है जो की इमेज की शेप को निर्धारित करती है; यह 0 से 1 के बीच के नंबर को वैल्यू की तरह लेती है. तो अगर आपको थोड़ी सी पारदर्शी इमेज चाहिए तो आप उसे 0.8 या 0.5 सेट कर सकते हो. हमने अपनी वैल्यू 0 सेट कर ली है क्योंकि parrot शेप (shape) के आस पास का एरिया पूरी तरह से पारदर्शी है.

परिणाम कुछ ऐसा दिखना चाहिए:

Fallback को उपलब्ध कराना

CSS Shapes के लिए ब्राउज़र का सपोर्ट काफी उचित है; हांलांकि Firefox, Internet Explorer या Edge से ज्यादा की उम्मीद मत कीजिये. साथ ही, पिछले टुटोरिअल में Stephen के प्रश्न के जवाब में, हमारे पास बहुत से विकल्प है.

यह बहुत अच्छा है, पर वास्तविक प्रश्न है: IE/FF के लिए fallback क्या है? ऐसा लगता है जैसे यह सब एक लेआउट की शेप के साथ चलने पर बहुत सारे यूजर के लिए अजीब जगहों के साथ ख़त्म होगा." - Stephen Bateman

सबसे पहले, हम Modernizr का प्रयोग कर सकते हैं. Modernizr JavaScript की ब्राउज़र के फीचर्स का परिक्षण करने की एक विश्वसनीय लाइब्रेरी है. जब आप लाइब्रेरी को डाउनलोड करें तो सुनिश्चित करें की आपने CSS Shapes को और Add CSS classes के ऑप्शन को शामिल कर लिया है. तब आप लेआउट के स्टाइल्स को उल्लेखित (specify) कर सकते हैं जब CSS Shape का सपोर्ट न हो, जैसे की नीचे दिया गया है:

अगर Modernizr को लोड करना बहुत ज्यादा लगता है तो, क्योंकि आपको केवल यह जानने की जरूरत है की ब्राउज़र में CSS इनेबल है की नहीं, आप निम्नलिखित JavaScript की लाइन्स को जोड़ सकते हैं.

CSS की सभी प्रॉपर्टी JavaScript के स्टाइल ऑब्जेक्ट के अंतर्गत उसके सम्मान ही आती है, जो की हमें JavaScript की मदद से dynamically स्टाइल को डालने की अनुमति देता है. यह कोड पता लगाता है की ब्राउज़र में shapeOutside मेथड है की नहीं, फिर जहाँ यह मामला नहीं है हम वहां no-css-shape क्लास को जोड़ देते हैं, जिसे की हम fallback स्टाइल्स को जोड़ने के लिए प्रयोग करते हैं.

अंत में, हम CSS के @support सिंटेक्स का प्रयोग अपने stylesheet में कर सकते हैं, उदाहरण के लिए.

आपके प्रोजेक्ट में कौन सा दृष्टिकोण (approach) सबसे योग्य है यह आप पर निर्भर करता है.

समेटते हुए (Wrapping Up)

इस टुटोरिअल में, हमने खोज की कि polygon() फंक्शन का प्रयोग CSS Shapes में कैसे करें और सीखा की Chrome एक्सटेंशन का प्रयोग करते हुए हम बहुभुज (polygons) को आसानी से कैसे बना सकते हैं. हमने यह भी सीखा की कैसे हम इमेज का लाभ उठा कर अपने लिए shapes बना सकते हैं; यह बेहद जटिल shapes के लिए विशेष रूप से उपयोगी होता है. अंत में, CSS Shapes के उचित (reasonable) ब्राउज़र सपोर्ट के बावजूद, हमने असमर्थित ब्राउज़र (unsupported browsers) के अच्छे विकल्प के प्रयोग के बारे में बात की.

डेमो (Demos)

उपयोगी लिंक्स

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.