क्लिप-पथ - सीएसएस-ट्रिक्स

विषय - सूची

clip-pathसीएसएस में संपत्ति तुम आराम छिपा हुआ जा रहा है (या "काटा") दूर के साथ, प्रदर्शित करने के लिए एक तत्व के एक विशेष क्षेत्र निर्दिष्ट करने के लिए अनुमति देता है।

.clip-me ( /* Example: clip away the element from the top, right, bottom, and left edges */ clip-path: inset(10px 20px 30px 40px); /* or "none" */ /* Example: clip element into a Heptagon */ clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); /* Deprecated version */ position: absolute; /* absolute or fixed positioning required */ clip: rect(110px, 160px, 170px, 60px); /* or "auto" */ /* values descript a top/left point and bottom/right point */ )

वहाँ एक clipसंपत्ति हुआ करती थी, लेकिन ध्यान दें कि यह पदावनत है।

सबसे आम उपयोग मामला एक छवि होगा, लेकिन यह केवल उसी तक सीमित नहीं है। आप आसानी clip-pathसे एक पैरा टैग और केवल पाठ के एक हिस्से पर लागू कर सकते हैं ।

 
 I'll be clipped.

inset()(सीएसएस उपरोक्त में) वे चार मान शीर्ष / बाएं बिंदु और नीचे / दाएं बिंदु का प्रतिनिधित्व करते हैं , जो दृश्य आयत बनाता है। उस आयत के बाहर सब कुछ छिपा है।

लुई लजारिस की यह छवि **पुराने `clip: rect();`वाक्यविन्यास** के चार बिंदुओं को बहुत अच्छी तरह से समझाती है ।

अन्य संभावित मान:

.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 */ /* rounded corners… not sure if a thing anymore */ clip-path: inset(10% 10% 10% 10% round 20%, 20%); )

उदाहरण SVG क्लिप पथ:

यह बहुत अजीब है कि गेट के बाहर फ़ंक्शन का clip-pathसमर्थन नहीं किया path(), क्योंकि path()पहले से ही जैसे गुणों के लिए एक चीज़ है motion-path। फ़ायरफ़ॉक्स के पास अब इसके लिए समर्थन है, और हम बाकी ब्राउज़रों की प्रतीक्षा कर रहे हैं। क्लिप-पथ का एक प्रारंभिक कार्यान्वयन देखें: पथ ();

अपना खुद का बना

जब तक हम मज़बूती से उपयोग कर सकते हैं path(), तब तक फैंसी कस्टम आकार के लिए सबसे उपयोगी क्लिप है polygon()। यहाँ Mads Stoumann (जो हलकों और दीर्घवृत्त के लिए भी काम करता है) से उन लोगों के लिए एक बहुत साफ संपादक है:

अधिक जानकारी

CSS में क्लिपिंग और मास्किंग
WPD पर क्लिप-पथ
MDN पर क्लिप-पथ
Clippy: बेनेट Feely का क्लिप-पथ निर्माता
एमडीएन पर क्लिपिंग और मास्किंग
सीएसएस क्लिप प्रॉपर्टी (प्रभावशाली जाले)
सीएसएस मास्किंग पर विशेष
डर्क शुल्ज़ द्वारा सीएसएस मास्किंग
CSS और SVG में क्लिपिंग - सारा सोइदान द्वारा क्लिप-पथ संपत्ति और तत्व
पेन ने कोडपेन पर क्लिप-पथ को टैग किया
डेमो और ब्राउज़र Yoksel द्वारा डेमो पेन का समर्थन करते हैं
जैकब जेनकोव द्वारा एसवीजी मास्क
क्लिपिंग और मास्किंग सुविधाओं के लिए एलन ग्रीनब्लाट के शोध ब्राउज़र समर्थन स्तरों पर