क्लिपिंग और मास्किंग की अवधारणा बहुत सरल है। तत्वों के कुछ हिस्सों को छिपाएं और दूसरों को दिखाएं। उनके बीच वास्तविक अंतर बहुत सरल है। क्लिपिंग हमेशा एक वेक्टर पथ है, जहां पथ अंदर दिखाई देता है और बाहर पथ नहीं है। जहां एक मुखौटा एक छवि है, एक ग्रेस्केल छवि के रूप में माना जाता है जहां काले हिस्से पारदर्शिता के लिए छवि को मुखौटा करते हैं और सफेद भागों को छवि के माध्यम से जाने देते हैं।
क्लिपिंग और मास्किंग को लागू करना विशेष रूप से आसान नहीं है, क्योंकि इसके लिए ब्राउज़र समर्थन (और सभी छोटे और-इन-आउट) काफी भिन्न है। हम कोशिश करते हैं और इस पेंचकस, संघर्ष और सभी में से गुजरें।
सभी संभावनाओं के लिए वाक्य रचना है:
.clip-me ( /* referencing path from an inline SVG */ clip-path: url(#c1); /* referencing path from external SVG */ clip-path: url(path.svg#c1); /* polygon */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* circle */ clip-path: circle(30px at 35px 35px); /* ellipse */ clip-path: ellipse(65px 30px at 125px 40px); /* inset-rectangle() may replace inset() ? */ /* rectangle() coming in SVG 2 */ /* Masking */ /* mask-image, mask-position, mask-repeat, mask-clip, mask-size… */ mask: url(mask.svg); mask-type: luminance || alpha; -webkit-mask-box-image: url(stampTiles.svg) 30 repeat; mask-border: url(stampTiles.svg) 30 repeat; )इस विडियो में हमने जो डेमो सामग्री खेली, उनमें से कुछ यहाँ और यहाँ हैं।
यहाँ संसाधनों का एक पूरा गुच्छा है:
- सीएसएस-ट्रिक्स पंचांग पर यहाँ क्लिप-पथ
- CSS में क्लिपिंग और मास्किंग
- WPD पर क्लिप-पथ
- MDN पर क्लिप-पथ
- एमडीएन पर क्लिपिंग और मास्किंग
- सीएसएस क्लिप प्रॉपर्टी (प्रभावशाली जाले)
- सीएसएस मास्किंग पर विशेष
- डर्क शुल्ज़ द्वारा सीएसएस मास्किंग
- CSS और SVG में क्लिपिंग -
सारा सोइदान द्वारा क्लिप-पथ संपत्ति और तत्व - पेन ने कोडपेन पर क्लिप-पथ को टैग किया
- डेमो और ब्राउज़र Yoksel द्वारा डेमो पेन का समर्थन करते हैं
- जैकब जेनकोव द्वारा एसवीजी मास्क
- क्लिपिंग और मास्किंग सुविधाओं के लिए एलन ग्रीनब्लाट के शोध ब्राउज़र समर्थन स्तरों पर