सीएसएस में क्लिपिंग का इस्तेमाल करने से, हमें अपने डिज़ाइन में बॉक्स की तरह दिखने वाली सभी चीज़ों को छोड़कर आगे बढ़ने में मदद मिल सकती है. अलग-अलग बुनियादी आकार या SVG का इस्तेमाल करके, क्लिप पाथ बनाया जा सकता है. इसके बाद, उस एलिमेंट के उन हिस्सों को हटा दें जिन्हें आपको नहीं दिखाना है.
वेब पेजों पर सभी एलिमेंट एक आयताकार बॉक्स में परिभाषित किए जाते हैं.
हालांकि, इसका मतलब यह नहीं है कि हमें हर चीज़ को बॉक्स की तरह दिखाना होगा.
दिलचस्प इफ़ेक्ट बनाने के लिए, किसी इमेज या अन्य एलिमेंट के हिस्सों को क्लिप करने के लिए, सीएसएस 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()
inset() वैल्यू, एलिमेंट के किनारे से क्लिप किए गए हिस्से को सेट करती है.
साथ ही, इसे ऊपर, दाएं, नीचे, और बाएं किनारों के लिए वैल्यू पास किया जा सकता है.
क्लिप किए गए हिस्से के कोनों को मोड़ने के लिए, round कीवर्ड का इस्तेमाल करके border-radius भी जोड़ा जा सकता है.
मेरे उदाहरण में मेरे पास .box की क्लास वाले दो बॉक्स हैं.
पहले बॉक्स में कोई क्लिपिंग नहीं है और दूसरे बॉक्स में inset() वैल्यू का इस्तेमाल करके क्लिप बनाई गई है.
circle()
जैसा कि आपने देखा है, circle() वैल्यू एक गोल क्लिप वाला हिस्सा बनाती है.
पहली वैल्यू एक लंबाई या प्रतिशत है. यह सर्कल की रेडियस होती है.
दूसरी वैकल्पिक वैल्यू की मदद से, सर्कल का सेंटर सेट किया जा सकता है.
नीचे दिए गए उदाहरण में, मैं अपने क्लिप किए गए सर्कल को ऊपर दाईं ओर सेट करने के लिए कीवर्ड वैल्यू का इस्तेमाल कर रहा/रही हूं.
आप लंबाई या प्रतिशत का भी इस्तेमाल कर सकते हैं.
सपाट किनारों से सावधान रहें!
इन सभी वैल्यू का ध्यान रखें कि एलिमेंट पर मौजूद मार्जिन बॉक्स से, आकार को क्लिप किया जाएगा. अगर किसी इमेज पर सर्कल बनाया जाता है और वह शेप, इमेज के साइज़ से बाहर होगा, तो आपको एक सपाट किनारा दिखेगा.
circle(50%) लगा है. इमेज स्क्वेयर नहीं है, इसलिए हम सबसे ऊपर और नीचे मार्जिन बॉक्स को हिट करते हैं. इससे सर्कल कट जाता है.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 पर सीएसएस ट्रांज़िशन और ऐनिमेशन लागू किए जा सकते हैं.
इस अगले उदाहरण में, मैंने अलग-अलग रेडियस वैल्यू वाले दो सर्कल के बीच ट्रांज़िशन करके, कर्सर घुमाने पर एक सर्कल को ऐनिमेट किया है.
क्लिप बनाने के कई क्रिएटिव तरीकों से ऐनिमेशन का इस्तेमाल किया जा सकता है. CSS Tricks पर क्लिप-पाथ के साथ ऐनिमेट करना, कुछ आइडिया देता है.
बर्स्ट पर मैथ्यू हेनरी की फ़ोटो.