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() थी. यह आकार की बुनियादी वैल्यू में से एक है. इन वैल्यू के बारे में CSS Shapes स्पेसिफ़िकेशन में बताया गया है. इसका मतलब है कि किसी हिस्से को क्लिप किया जा सकता है और shape-outside के लिए एक ही वैल्यू का इस्तेमाल करके, टेक्स्ट को उस आकार के चारों ओर रैप किया जा सकता है.

बुनियादी आकारों की पूरी सूची यहां दी गई है:

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

inset()

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

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

circle()

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

फ़्लैट किनारों से सावधान रहें!

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

ellipse()

दीर्घवृत्त, असल में एक छोटा गोला होता है. इसलिए, यह circle() की तरह ही काम करता है. हालांकि, इसमें x और y के लिए त्रिज्या के साथ-साथ दीर्घवृत्त के बीच की वैल्यू भी डाली जा सकती है.

polygon()

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

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

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

साथ ही, सीएसएस के आकार में बॉक्स की वैल्यू से बनाए गए आकार भी होते हैं. ये सीएसएस बॉक्स मॉडल से जुड़े हैं -- कॉन्टेंट बॉक्स, पैडिंग बॉक्स, बॉर्डर बॉक्स, और मार्जिन बॉक्स. इनमें 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 पर सीएसएस ट्रांज़िशन और ऐनिमेशन लागू किए जा सकते हैं. इस अगले उदाहरण में, मैंने अलग-अलग त्रिज्या वाली दो सर्कल के बीच ट्रांज़िशन करके, कर्सर घुमाने पर सर्कल को ऐनिमेट किया है.

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

बर्स्ट मोड में ली गई मैथ्यू हेनरी की फ़ोटो.