CSS'की क्लिप-पाथ प्रॉपर्टी की मदद से दिलचस्प इमेज आकार बनाएं

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

Rachel Andrew

वेब पेजों पर मौजूद सभी एलिमेंट, एक आयताकार बॉक्स में तय किए जाते हैं. हालांकि, इसका मतलब यह नहीं है कि हमें हर चीज़ को बॉक्स की तरह दिखाना है. किसी इमेज या दूसरे एलिमेंट के हिस्सों को क्लिप करने के लिए, सीएसएस clip-path प्रॉपर्टी का इस्तेमाल करें, दिलचस्प इफ़ेक्ट बनाने के लिए.

ऊपर दिए गए उदाहरण में, गुब्बारे की इमेज स्क्वेयर है (सोर्स). clip-path और circle() के बुनियादी आकार की वैल्यू का इस्तेमाल करके, बैलून के आस-पास मौजूद अतिरिक्त आसमान को काट दिया जाता है. इससे पेज पर एक गोल आकार की इमेज बन जाती है.

यह इमेज एक लिंक है, इसलिए आपको clip-path प्रॉपर्टी के बारे में कुछ और दिख सकता है. इमेज के सिर्फ़ दिखने वाले हिस्से पर क्लिक किया जा सकता है, क्योंकि इवेंट, इमेज के छिपे हुए हिस्सों में ट्रिगर नहीं होते हैं.

क्लिपिंग सिर्फ़ इमेज पर ही नहीं, बल्कि किसी भी एचटीएमएल एलिमेंट पर लागू की जा सकती है. clip-path बनाने के कई तरीके हैं. इस पोस्ट में हम उनके बारे में जानेंगे.

ब्राउज़र के साथ काम करना

लेगसी ब्राउज़र के लिए, हो सकता है कि फ़ॉलबैक ब्राउज़र को clip-path प्रॉपर्टी को अनदेखा करने और बिना स्किप की गई इमेज दिखाने की अनुमति दे. अगर यह समस्या है, तो सुविधा क्वेरी में clip-path की जांच की जा सकती है. साथ ही, उन ब्राउज़र के लिए कोई अन्य लेआउट ऑफ़र किया जा सकता है जिन पर यह सुविधा काम नहीं करती.

@supports(clip-path: circle(45%)) {
  /* code that requires clip-path here. */
}

बुनियादी आकार

clip-path प्रॉपर्टी में कई वैल्यू हो सकती हैं. शुरुआती उदाहरण में इस्तेमाल की गई वैल्यू circle() थी. यह आकार की बुनियादी वैल्यू में से एक है, जिन्हें सीएसएस के आकार की खास बातें. इसका मतलब है कि किसी हिस्से को क्लिप किया जा सकता है और shape-outside के लिए एक ही वैल्यू का इस्तेमाल करके, टेक्स्ट को उस आकार के हिसाब से रैप किया जा सकता है.

मूल आकारों की पूरी सूची यह है:

• inset()
• circle()
• ellipse()
• polygon()

inset()

inset() वैल्यू, एलिमेंट के किनारे से क्लिप की गई जगह को सेट करती है, साथ ही, ऊपर, दाएं, नीचे, और बाएं किनारों के लिए वैल्यू पास की जा सकती हैं. क्लिप किए गए हिस्से के कोनों को वक्र बनाने के लिए border-radius भी जोड़ा जा सकता है, इसके लिए, round कीवर्ड का इस्तेमाल करें.

मेरे उदाहरण में मेरे पास दो बॉक्स हैं, दोनों में .box क्लास है. पहले बॉक्स में कोई क्लिपिंग नहीं है, दूसरे बॉक्स को inset() वैल्यू का इस्तेमाल करके क्लिप किया गया है.

circle()

जैसा कि आपने देखा. circle() वैल्यू, क्लिप का एक सर्कल वाला हिस्सा बनाती है. पहली वैल्यू, लंबाई या प्रतिशत होती है और यह सर्कल की त्रिज्या होती है. दूसरी वैकल्पिक वैल्यू की मदद से, सर्कल का सेंटर सेट किया जा सकता है. नीचे दिए गए उदाहरण में, अपने क्लिप किए गए सर्कल को ऊपर दाईं ओर सेट करने के लिए, मैं कीवर्ड वैल्यू का इस्तेमाल कर रहा/रही हूं. लंबाई या प्रतिशत का भी इस्तेमाल किया जा सकता है.

सपाट किनारों से बचें!

इन सभी वैल्यू का ध्यान रखें कि एलिमेंट पर मौजूद मार्जिन बॉक्स की मदद से, शेप को क्लिप किया जाएगा. अगर आपने किसी इमेज पर सर्कल बनाया है, और वह आकार चित्र के प्राकृतिक आकार से बाहर विस्तृत हो जाएगा, तो आपको सपाट किनारे मिलेगा.

ellipse()

दीर्घवृत्त मुख्य रूप से स्क्वॉश्ड सर्कल होता है, और इसलिए काफ़ी हद तक circle() की तरह काम करता है, लेकिन x के लिए दायरा और y के लिए दायरा स्वीकार करता है, और दीर्घवृत्त के केंद्र का मान.

polygon()

polygon() वैल्यू की मदद से, काफ़ी जटिल आकार बनाए जा सकते हैं, जितने चाहें उतने पॉइंट तय करने होंगे, हर पॉइंट के निर्देशांक सेट करके.

पॉलीगॉन बनाने में मदद पाने और यह जानने के लिए कि क्या संभव है, Clippy देखें, clip-path जनरेटर, फिर कोड को कॉपी करके अपने प्रोजेक्ट में चिपकाएं.

बॉक्स वैल्यू से आकार

साथ ही, सीएसएस के आकार में बॉक्स की वैल्यू से बनाए गए आकार भी होते हैं. ये सीएसएस बॉक्स मॉडल -- कॉन्टेंट बॉक्स, पैडिंग बॉक्स, बॉर्डर बॉक्स, और मार्जिन बॉक्स, जिसकी कीवर्ड वैल्यू के तौर पर content-box, border-box, padding-box, और margin-box की कीवर्ड वैल्यू दी गई हैं.

इन वैल्यू का इस्तेमाल, किसी बुनियादी आकार के साथ किया जा सकता है. इससे, आकार के लिए इस्तेमाल किए जाने वाले रेफ़रंस बॉक्स को तय किया जा सकता है. उदाहरण के लिए, यह आकार को कॉन्टेंट के किनारे तक क्लिप कर देगा.

.box {
  clip-path: content-box;
}

इस उदाहरण में, सर्कल margin-box (जो डिफ़ॉल्ट है) के बजाय, content-box को रेफ़रंस बॉक्स के तौर पर इस्तेमाल करेगा.

.box {
  clip-path: circle(45%) content-box;
}

फ़िलहाल, ब्राउज़र में clip-path प्रॉपर्टी के लिए बॉक्स वैल्यू का इस्तेमाल नहीं किया जा सकता. हालांकि, shape-outside के लिए इनका इस्तेमाल किया जा सकता है.

SVG एलिमेंट का इस्तेमाल करना

बुनियादी आकारों की तुलना में, क्लिप किए गए हिस्से पर ज़्यादा कंट्रोल पाने के लिए, SVG clipPath एलिमेंट का इस्तेमाल करें. इसके बाद, clip-path की वैल्यू के तौर पर url() का इस्तेमाल करके, उस आईडी का रेफ़रंस दें.

क्लिप की गई जगह को ऐनिमेट किया जा रहा है

कुछ दिलचस्प इफ़ेक्ट बनाने के लिए, clip-path पर सीएसएस ट्रांज़िशन और ऐनिमेशन लागू किए जा सकते हैं. इस अगले उदाहरण में, मैं अलग-अलग दायरे की वैल्यू वाले दो सर्कल के बीच ट्रांज़िशन करके, कर्सर घुमाने पर एक सर्कल को ऐनिमेट कर रहा/रही हूं.

क्लिपिंग के साथ ऐनिमेशन का इस्तेमाल करने के कई रचनात्मक तरीके हैं. सीएसएस ट्रिक्स पर क्लिप-पाथ के साथ ऐनिमेशन बनाने के कुछ आइडिया आते हैं.

बर्स्ट पर मैथ्यू हेनरी की फ़ोटो.