पाथ, शेप, क्लिपिंग, और मास्किंग

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

पाथ और शेप

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

CSS में तय किए गए शेप, बेसिक शेप (जैसे कि सर्कल, रेक्टैंगल, और पॉलीगॉन) या पाथ (जो जटिल और कंपाउंड शेप तय कर सकते हैं) हो सकते हैं.

सामान्य शेप

circle() और ellipse()

circle() और ellipse() फ़ंक्शन, किसी एलिमेंट के हिसाब से रेडियस वाले गोल और अंडाकार शेप तय करते हैं. circle() फ़ंक्शन, साइज़ या प्रतिशत को एक आर्ग्युमेंट के तौर पर स्वीकार करता है. डिफ़ॉल्ट रूप से, दोनों फ़ंक्शन, शेप को एलिमेंट के बीच में रखते हैं. दोनों ही at कीवर्ड के बाद, वैकल्पिक पोज़िशन स्वीकार करते हैं. इसे लंबाई, प्रतिशत या पोज़िशनल कीवर्ड के तौर पर दिखाया जा सकता है.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: circle(50%);
}

ऊपर दिए गए उदाहरण में, circle() फ़ंक्शन का इस्तेमाल करके एक गोलाकार क्लिपिंग पाथ दिखाया गया है. ध्यान दें कि 50% के रेडियस से, एलिमेंट की पूरी चौड़ाई का एक सर्कल बनता है. ellipse() फ़ंक्शन, दो आर्ग्युमेंट स्वीकार करता है. ये आर्ग्युमेंट, शेप की हॉरिज़ॉन्टल और वर्टिकल रेडियस को दिखाते हैं.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25%);
}

ऊपर दिए गए उदाहरण में, ellipse() फ़ंक्शन का इस्तेमाल करके, अंडाकार क्लिपिंग पाथ दिखाया गया है. ध्यान दें कि 50% रेडियस से, एलिमेंट की पूरी चौड़ाई वाला एक एलिप्स बनता है. इस उदाहरण में, एक ही एलिप्स को दिखाया गया है. इसे एलिमेंट के सबसे ऊपर, बीच में रखा गया है.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25% at center top);
}

rect() और inset()

rect() और inset() फ़ंक्शन, किसी आयत को अलग-अलग तरीकों से तय करने की सुविधा देते हैं. इसके लिए, किसी एलिमेंट की साइड के हिसाब से आयत की साइड की पोज़िशन सेट की जाती है. इससे ऐसे रेक्टैंगल बनाए जा सकते हैं जो एलिमेंट के डिफ़ॉल्ट बॉक्स से अलग दिखते हैं. ये round कीवर्ड को स्वीकार करते हैं. इससे गोल कोनों वाला आयत बनाया जा सकता है. इसके लिए, border-radius शॉर्टहैंड प्रॉपर्टी के तौर पर इस्तेमाल किए गए सिंटैक्स का इस्तेमाल किया जाता है.

rect() फ़ंक्शन, रेक्टैंगल की ऊपर और नीचे की ओर की जगह को एलिमेंट के सबसे ऊपर वाले किनारे के हिसाब से तय करता है. साथ ही, बाईं और दाईं ओर की जगह को एलिमेंट के सबसे बाएं वाले किनारे के हिसाब से तय करता है. यह फ़ंक्शन, साइज़ या प्रतिशत की चार इकाइयों को आर्ग्युमेंट के तौर पर स्वीकार करता है. ये इकाइयां, ऊपर, दाईं, नीचे, और बाईं ओर की सीमाओं को तय करती हैं. जब आपको ऐसा आयत चाहिए जो एलिमेंट का साइज़ बदलने पर स्केल न हो या जो एलिमेंट के साइज़ में बदलाव होने पर भी अपने अनुपात को बनाए रखे, तब rect() फ़ंक्शन का इस्तेमाल करें.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: rect(15px 75px 45px 10px);
}

ऊपर दिए गए उदाहरण में, rect() फ़ंक्शन का इस्तेमाल करके तय किया गया आयताकार क्लिपिंग पाथ दिखाया गया है. डाइमेंशन, एलिमेंट के ऊपर और बाईं ओर के किनारों के हिसाब से होते हैं. इन्हें डायग्राम में दिखाया गया है.

inset() फ़ंक्शन, किसी रेक्टैंगल की साइड की पोज़िशन तय करता है. इसके लिए, वह किसी एलिमेंट की हर साइड से अंदर की ओर की दूरी का इस्तेमाल करता है. यह फ़ंक्शन, साइज़ या प्रतिशत की एक से चार यूनिट को आर्ग्युमेंट के तौर पर स्वीकार करता है. इससे, एक साथ कई साइड तय की जा सकती हैं. जब आपको ऐसा रेक्टैंगल चाहिए जो एलिमेंट के साथ स्केल होता हो या ऐसा रेक्टैंगल चाहिए जो एलिमेंट के किनारों से तय दूरी पर हो, तब inset() फ़ंक्शन चुना जा सकता है.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px);
}

ऊपर दिए गए उदाहरण में, inset() फ़ंक्शन का इस्तेमाल करके तय किया गया आयताकार क्लिपिंग पाथ दिखाया गया है. डाइमेंशन, एलिमेंट की साइड के हिसाब से होते हैं.

rect() और inset() फ़ंक्शन, round कीवर्ड को स्वीकार करते हैं. हालांकि, यह ज़रूरी नहीं है. इसका इस्तेमाल, गोल कोनों वाला रेक्टैंगल बनाने के लिए किया जाता है. इसके लिए, border-radius शॉर्टहैंड प्रॉपर्टी के सिंटैक्स का इस्तेमाल किया जाता है. इस उदाहरण में, पहले दिखाए गए आयतों के गोल किए गए वर्शन दिखाए गए हैं.

.rounded-rect {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

.rounded-inset {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

polygon()

polygon() फ़ंक्शन की मदद से, त्रिकोण, पंचभुज, तारे वगैरह जैसे अन्य शेप बनाए जा सकते हैं. इसके लिए, कई पॉइंट को सीधी लाइनों से कनेक्ट किया जाता है. polygon() फ़ंक्शन, लंबाई या प्रतिशत की दो इकाइयों वाले जोड़ों की सूची स्वीकार करता है. हर पेयर, पॉलीगॉन पर मौजूद एक पॉइंट के बारे में बताता है: पहली वैल्यू, एलिमेंट के बाएं किनारे से दूरी होती है. वहीं, दूसरी वैल्यू, एलिमेंट के ऊपरी किनारे से दूरी होती है. आपको पॉलीगॉन को बंद करने की ज़रूरत नहीं है, क्योंकि आखिरी पॉइंट को पहले पॉइंट से कनेक्ट करके इसे पूरा किया जाएगा.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: polygon(
    50% 0,
    0 100%,
    100% 100%
  );
}

ऊपर दिए गए उदाहरण में, तीन पॉइंट तय करके त्रिकोणीय क्लिपिंग पाथ बनाया गया है.

डिफ़ॉल्ट रूप से, polygon() फ़ंक्शन ओवरलैप होने वाली जगहों को भरा हुआ दिखाता है. फ़िल करने के नियम के तौर पर इस्तेमाल किए जाने वाले पहले आर्ग्युमेंट की मदद से, इस व्यवहार को बदला जा सकता है. भरे हुए और बिना भरे हुए हिस्सों के बीच बारी-बारी से बदलाव करने के लिए, भरने का नियम evenodd पर सेट करें. डिफ़ॉल्ट फ़िल नियम का इस्तेमाल करने के लिए, इसे nonzero पर सेट करें.

ऊपर दिए गए उदाहरण में, रेगुलर पॉलीगॉन और स्टार शेप बनाने के लिए, त्रिकोणमितीय फ़ंक्शन के साथ polygon() फ़ंक्शन दिखाया गया है. इससे ऐसा सबसे बड़ा रेगुलर पॉलीगॉन नहीं बनता जो किसी एलिमेंट के अंदर फ़िट हो या उसे बीच में रखा गया हो. हम इसे आपके लिए एक टास्क के तौर पर छोड़ देंगे. इस उदाहरण में स्टार के आकार, nonzero और evenodd भरने के नियमों के बारे में भी बताते हैं.

मुश्किल आकृतियां

जब किसी जटिल शेप के बारे में बताने के लिए, बेसिक शेप फ़ंक्शन काफ़ी नहीं होते हैं, तो सीएसएस ऐसे फ़ंक्शन उपलब्ध कराता है जो कर्व और लाइनों जैसी सुविधाओं के बारे में बताने के लिए, ज़्यादा बेहतर सिंटैक्स का इस्तेमाल करते हैं. ये फ़ंक्शन, कंपाउंड शेप (ऐसे शेप जो कई शेप से मिलकर बने होते हैं, जैसे कि बीच में छेद वाला सर्कल) के लिए भी काम के होते हैं.

path()

path() फ़ंक्शन, किसी शेप के बारे में बताने के लिए SVG पाथ सिंटैक्स की स्ट्रिंग स्वीकार करता है. इससे जटिल आकृतियां बनाई जा सकती हैं. इसके लिए, लाइनों और कर्व के बारे में बताने वाले निर्देशों का इस्तेमाल किया जाता है. एसवीजी सिंटैक्स में सीधे तौर पर बदलाव करना मुश्किल हो सकता है. इसलिए, हमारा सुझाव है कि आप किसी ऐसे विज़ुअल एडिटर का इस्तेमाल करें जो path() फ़ंक्शन का इस्तेमाल करके शेप बनाते समय सिंटैक्स एक्सपोर्ट कर सके.

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

shape()

shape() फ़ंक्शन, शेप के बारे में बताने के लिए कमांड सिंटैक्स का इस्तेमाल करता है. यह path() फ़ंक्शन की तरह ही होता है. हालांकि, shape() फ़ंक्शन के कमांड नेटिव सीएसएस हैं और सीएसएस साइज़ यूनिट का इस्तेमाल कर सकते हैं. इससे shape() फ़ंक्शन का इस्तेमाल करके तय किए गए शेप को रिस्पॉन्सिव बनाया जा सकता है.

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

क्लिपिंग

क्लिपिंग से यह तय होता है कि किसी एलिमेंट के कौनसे हिस्से दिखेंगे. यह किसी मैगज़ीन से इमेज काटने जैसा होता है. clip-path प्रॉपर्टी, क्लिप एरिया को तय करने के लिए इस्तेमाल किए गए पाथ को सेट करती है.

आपने पिछले सेक्शन के उदाहरणों में देखा कि किसी भी बेसिक शेप या पाथ फ़ंक्शन का इस्तेमाल clip-path के तौर पर किया जा सकता है. clip-path प्रॉपर्टी, SVG clipPath एलिमेंट में तय किए गए पाथ के साथ भी काम करती है. इन्हें एम्बेड किया जा सकता है या अलग फ़ाइल में रखा जा सकता है.

ऊपर दिए गए डायग्राम में दिखाया गया है कि इमेज एलिमेंट में clip-path जोड़ने से, इमेज का दिखने वाला हिस्सा कैसे बदल जाता है. ऊपरी क्लिप पाथ में circle() फ़ंक्शन का इस्तेमाल किया गया है, जबकि निचले क्लिप पाथ में SVG clipPath का इस्तेमाल किया गया है. ध्यान दें कि circle() फ़ंक्शन का इस्तेमाल करके बनाया गया सर्कल, डिफ़ॉल्ट रूप से एलिमेंट के बीच में होता है.

clip-path प्रॉपर्टी में सिर्फ़ एक पाथ स्वीकार किया जाता है. एक से ज़्यादा ऐसे शेप वाले एलिमेंट को क्लिप करने के लिए जो एक-दूसरे पर नहीं चढ़ते, path() या shape() फ़ंक्शन का इस्तेमाल करके कंपाउंड पाथ तय करें या SVG clipPath का इस्तेमाल करें. जटिल स्थितियों के लिए, क्लिपिंग के बजाय मास्किंग का इस्तेमाल किया जा सकता है. इसके बारे में हम बाद के सेक्शन में बताएंगे.

आकृतियों की मदद से क्लिप करना

किसी बेसिक शेप या पाथ फ़ंक्शन का इस्तेमाल करके क्लिप करने के लिए, clip-path प्रॉपर्टी को फ़ंक्शन से मिली वैल्यू पर सेट करें. जैसा कि ऊपर दिए गए उदाहरणों में दिखाया गया है. हर फ़ंक्शन, क्लिपिंग शेप को एलिमेंट के हिसाब से अलग-अलग जगह पर रखता है. इसलिए, हर फ़ंक्शन के लिए रेफ़रंस देखें.

ऊपर दिए गए उदाहरण में, दो एलिमेंट पर .clipped क्लास का इस्तेमाल करके, गोलाकार clip-path लागू किया गया है. ध्यान दें कि clip-path को हर एलिमेंट के हिसाब से सेट किया जाता है. साथ ही, clip-path में मौजूद टेक्स्ट, शेप के हिसाब से नहीं बदलता.

क्लिपिंग पाथ का रेफ़रंस बॉक्स

डिफ़ॉल्ट रूप से, किसी एलिमेंट के क्लिपिंग पाथ में एलिमेंट का बॉर्डर शामिल होता है. बेसिक शेप फ़ंक्शन में से किसी एक का इस्तेमाल करते समय, क्लिप-पाथ के रेफ़रंस बॉक्स को इस तरह सेट किया जा सकता है कि उसमें सिर्फ़ बॉर्डर के अंदर मौजूद एलिमेंट का हिस्सा शामिल हो. रेफ़रंस बॉक्स के लिए मान्य वैल्यू stroke-box (डिफ़ॉल्ट वैल्यू) और fill-box (सिर्फ़ बॉर्डर के अंदर का हिस्सा शामिल करने के लिए) हैं.

ऊपर दिए गए उदाहरण में, बड़े (20px बॉर्डर) वाले एलिमेंट दिखाए गए हैं. इनमें से हर एलिमेंट, clip-path सेट करने के लिए inset() फ़ंक्शन का इस्तेमाल करता है. जिस एलिमेंट को उसकी बॉर्डर के हिसाब से काटा जाता है वह अब भी बॉर्डर का कुछ हिस्सा दिखाता है. बॉर्डर के अंदर के एरिया के हिसाब से क्लिप किए गए एलिमेंट में कोई बॉर्डर नहीं दिखता. साथ ही, ये एक जैसी इंसर्ट वैल्यू के साथ भी छोटे होते हैं.

ग्राफ़िक के साथ क्लिपिंग करना

क्लिपिंग पाथ को किसी SVG दस्तावेज़ में तय किया जा सकता है. इसे एचटीएमएल दस्तावेज़ में एम्बेड किया जाता है या बाहरी तौर पर रेफ़रंस दिया जाता है. यह ग्राफ़िक्स प्रोग्राम में बनाए गए पेचीदा क्लिपिंग पाथ या एक से ज़्यादा शेप को मिलाकर बनाए गए क्लिपिंग पाथ को तय करने के लिए काम आ सकता है.

<img id="kitten" src="kitten.png">

<svg>
  <defs>
    <clipPath id="kitten-clip-shape">
      <circle cx="130" cy="175" r="100" />
    </clipPath>
  </defs>
</svg>

<style>
  #kitten {
    clip-path: url(#kitten-clip-shape);
  }
</style>

ऊपर दिए गए उदाहरण में, kitten-clip-shape के id वाले clipPath को <img> एलिमेंट पर लागू किया गया है. इस मामले में, SVG दस्तावेज़ को एचटीएमएल में एम्बेड किया जाता है. अगर SVG दस्तावेज़, kitten-clipper.svg नाम की कोई बाहरी फ़ाइल है, तो clipPath को url(kitten-clipper.svg#kitten-clip-shape) के तौर पर रेफ़र किया जाएगा.

मास्किंग

मास्किंग एक और तरीका है. इससे यह तय किया जाता है कि किसी एलिमेंट के कौनसे हिस्से दिखाए जाएं या छिपाए जाएं. क्लिपिंग में बुनियादी शेप या पाथ का इस्तेमाल किया जाता है. वहीं, मास्किंग में किसी इमेज या ग्रेडिएंट के पिक्सल का इस्तेमाल करके यह तय किया जाता है कि कौनसी चीज़ दिखेगी. क्लिपिंग के उलट, मास्किंग की मदद से किसी एलिमेंट के कुछ हिस्सों को हल्का किया जा सकता है. अलग-अलग इफ़ेक्ट बनाने के लिए, किसी एलिमेंट पर एक से ज़्यादा मास्क इमेज लागू की जा सकती हैं.

मास्क लागू करने के लिए, mask-image प्रॉपर्टी सेट करें. यह प्रॉपर्टी, SVG दस्तावेज़ में एक या उससे ज़्यादा इमेज, ग्रेडिएंट या <mask> एलिमेंट के रेफ़रंस स्वीकार करती है. एक से ज़्यादा मास्क इमेज लागू की जा सकती हैं. इसके लिए, उन्हें कॉमा लगाकर अलग करें.

.my-element {
  mask-image: url(my-mask.png),
              linear-gradient(black 0%, transparent 100%);
}

ऊपर दिए गए उदाहरण में, .my-element को पीएनजी इमेज का इस्तेमाल करके मास्क किया गया है. इसके बाद, लीनियर ग्रेडिएंट का इस्तेमाल किया गया है. डिफ़ॉल्ट रूप से, कई मास्क को एक साथ जोड़ा जाता है, ताकि फ़ाइनल मास्क बनाया जा सके.

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

ऐल्फ़ा वर्सेस ल्यूमिनेंस मास्किंग

इमेज के alpha या luminance का इस्तेमाल करके, मास्क लगाया जा सकता है. alpha के आधार पर मास्किंग करते समय, मास्क इमेज में मौजूद हर पिक्सल की पारदर्शिता को एलिमेंट पर लागू किया जाता है. साथ ही, उस पिक्सल के रंग की जानकारी को अनदेखा कर दिया जाता है. luminance के आधार पर मास्किंग करते समय, एलिमेंट पर पारदर्शिता और हर पिक्सल की वैल्यू (कितना चमकदार या गहरा) लागू होती है. ल्यूमिनेंस के हिसाब से मास्किंग करने पर, ज़्यादा चमकदार रंग दिखते हैं और गहरे रंग नहीं दिखते.

मास्किंग मोड सेट करने के लिए, mask-mode प्रॉपर्टी का इस्तेमाल करें. डिफ़ॉल्ट रूप से, mask-mode प्रॉपर्टी को match-source पर सेट किया जाता है. इससे मास्क इमेज के टाइप के आधार पर मोड सेट होता है. इमेज और ग्रेडिएंट के लिए, यह डिफ़ॉल्ट रूप से alpha पर सेट होगा. एसवीजी मास्क के लिए, यह डिफ़ॉल्ट रूप से <mask> एलिमेंट की mask-type प्रॉपर्टी की वैल्यू या luminance पर सेट होगा. ऐसा तब होगा, जब mask-type को तय नहीं किया गया हो.

ऊपर दिए गए उदाहरण में, अलग-अलग रंग और ऐल्फ़ा वैल्यू दिखाने वाले टेस्ट पैटर्न का इस्तेमाल मास्क के तौर पर किया गया है. mask-mode को टॉगल करके, यह देखा जा सकता है कि alpha मोड, पारदर्शिता पर आधारित होता है. वहीं, luminance मोड, रंग की चमक और पारदर्शिता, दोनों पर आधारित होता है.

मास्किंग की अन्य प्रॉपर्टी

सीएसएस, मास्क के व्यवहार को बेहतर बनाने के लिए अतिरिक्त प्रॉपर्टी उपलब्ध कराती है. इनमें से हर प्रॉपर्टी, कॉमा लगाकर अलग की गई वैल्यू की सूची स्वीकार करती है. इन वैल्यू का मिलान, mask-image प्रॉपर्टी से सेट किए गए मास्क की सूची से किया जाएगा. अगर वैल्यू की संख्या, मास्क की संख्या से कम है, तो सूची तब तक दोहराई जाएगी, जब तक हर मास्क के लिए कोई वैल्यू सेट नहीं हो जाती. अगर मास्क से ज़्यादा वैल्यू हैं, तो अतिरिक्त वैल्यू हटा दी जाती हैं.

मास्क के लिए शॉर्टहैंड

मास्क शॉर्टहैंड की मदद से, एक साथ कई मास्क प्रॉपर्टी सेट की जा सकती हैं. इससे हर मास्क की सभी प्रॉपर्टी को एक साथ ग्रुप करके, कई मास्क सेट करना आसान हो जाता है. मास्क शॉर्टहैंड का मतलब है कि इन प्रॉपर्टी को क्रम से सेट किया गया है: mask-image, mask-mode, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, और mask-composite. हर प्रॉपर्टी को शामिल करना ज़रूरी नहीं है. जो प्रॉपर्टी शामिल नहीं की जाती हैं उनकी वैल्यू, शुरुआती वैल्यू पर रीसेट हो जाएगी. हर मास्क के लिए ज़्यादा से ज़्यादा आठ प्रॉपर्टी का इस्तेमाल किया जा सकता है. इसलिए, पूरा रेफ़रंस उपलब्ध होने से मदद मिल सकती है.

.longhand {
  mask-image: linear-gradient(white, black),
              linear-gradient(90deg, black, transparent);
  mask-mode: luminance, alpha;
  mask-position: bottom left, top right;
  mask-size: 50% 50%, 30% 30%;
}

.shorthand {
  mask: linear-gradient(white, black) luminance bottom left / 50% 50%,
        linear-gradient(90deg, black, transparent) alpha top right / 30% 30%;
}

ऊपर दिए गए उदाहरण में, हर क्लास पर दो मास्क लागू किए गए हैं. पहले उदाहरण में अलग-अलग प्रॉपर्टी का इस्तेमाल किया गया है, जबकि दूसरे उदाहरण में mask शॉर्टहैंड का इस्तेमाल किया गया है. दोनों स्टाइल एक-दूसरे के बराबर हैं.

फ़्लोट किए गए एलिमेंट के आस-पास फ़्लोइंग टेक्स्ट

किसी एलिमेंट को क्लिप या मास्क करने पर, उसके बॉक्स में दिखने वाले हिस्से में ही बदलाव होता है. हालांकि, बॉक्स में कोई बदलाव नहीं होता. इसका मतलब है कि फ़्लोट किए गए एलिमेंट का असर, दस्तावेज़ के फ़्लो पर उसके ओरिजनल बाउंडिंग बॉक्स के हिसाब से पड़ेगा. एलिमेंट के दिखने वाले हिस्सों के हिसाब से नहीं. किसी एलिमेंट के चारों ओर फ़्लो तय करने के लिए, क्लिप पाथ के साथ shape-outside प्रॉपर्टी का इस्तेमाल करें.

shape-outside प्रॉपर्टी, उस शेप को तय करती है जिसके चारों ओर कॉन्टेंट दिखेगा. यह शेप, बेसिक शेप फ़ंक्शन में से कोई भी हो सकता है. हालांकि, यह path() या shape() फ़ंक्शन का इस्तेमाल करके तय किए गए शेप या SVG दस्तावेज़ में तय किया गया clipPath नहीं होना चाहिए.

shape-outside प्रॉपर्टी, इमेज या ग्रेडिएंट भी स्वीकार करती है. मास्किंग की तरह ही, शेप की सीमाएं इमेज या ग्रेडिएंट की पारदर्शिता के हिसाब से तय की जाएंगी. shape-image-threshold प्रॉपर्टी से यह तय होता है कि शेप के अंदर पारदर्शिता के किन लेवल को शामिल किया जाएगा.

ऐनिमेशन में शेप

क्लिप-पाथ को ऐनिमेट करना

clip-path प्रॉपर्टी को ऐनिमेट किया जा सकता है. इससे एक शेप से दूसरे शेप में ब्लेंड किया जा सकता है. स्मूथ ऐनिमेशन बनाने के लिए, हर कीफ़्रेम के लिए एक ही शेप फ़ंक्शन का इस्तेमाल करना ज़रूरी है. polygon() या shape() फ़ंक्शन का इस्तेमाल करते समय, हर कीफ़्रेम में एक ही संख्या में पॉइंट इस्तेमाल किए जाने चाहिए.

ऊपर दिए गए उदाहरण में, clip-path फ़ंक्शन का इस्तेमाल करके तय की गई पंचभुज और तारे के आकार के बीच, किसी एलिमेंट के clip-path में ट्रांज़िशन होता है.polygon() इस उदाहरण में, evenodd भरने के नियम का इस्तेमाल करके यह दिखाया गया है कि ऐनिमेशन वाले पॉइंट, ओवरलैपिंग एरिया कैसे बनाते हैं.

ऑफ़सेट-पाथ का इस्तेमाल करके ऐनिमेशन बनाना

इन शेप फ़ंक्शन की मदद से बनाए गए पाथ के साथ-साथ, एलिमेंट में ऐनिमेशन भी जोड़ा जा सकता है. offset-path प्रॉपर्टी, पाथ के तौर पर इस्तेमाल किए जाने वाले शेप को सेट करती है. वहीं, offset-distance प्रॉपर्टी, उस पाथ पर पोज़िशन सेट करती है. सीधी लाइन में ऐनिमेशन बनाने के लिए, ray() फ़ंक्शन के साथ offset-path प्रॉपर्टी का भी इस्तेमाल किया जा सकता है.

ऊपर दिए गए उदाहरण में, clip-path और offset-path, दोनों के लिए एक ही पॉलीगॉन का इस्तेमाल किया गया है. इस ऐनिमेशन में, छोटे तारों को एक ही पॉलीगॉन के साथ ले जाने के लिए offset-distance का इस्तेमाल किया गया है. इस पॉलीगॉन का इस्तेमाल बड़ा तारा, clip-path के तौर पर करता है.

देखें कि आपको कितना समझ आया