CSS क्लिप पाथ जनरेटर
मुफ़्त ऑनलाइन CSS clip-path जनरेटर। खींचने योग्य पॉइंट्स के साथ polygon, circle, ellipse और inset शेप बनाएं, लाइव प्रीव्यू देखें और एक क्लिक में CSS कोड कॉपी करें।
CSS clip-path क्या है?
clip-path एक CSS प्रॉपर्टी है जो तत्व को किसी बेसिक शेप या पाथ में काटती है। शेप के बाहर का हिस्सा छिप जाता है, इसलिए बिना इमेज एडिट किए आयताकार इमेज या बॉक्स को त्रिकोण, वृत्त, षट्भुज, तिरछा बैनर या किसी भी कस्टम पॉलीगॉन में बदल सकते हैं।
कौन से ब्राउज़र clip-path सपोर्ट करते हैं?
इस जनरेटर के सभी बेसिक शेप फंक्शन — polygon(), circle(), ellipse() और inset() — Chrome, Edge, Firefox, Safari और Opera समेत हर आधुनिक ब्राउज़र में सपोर्टेड हैं। -webkit-clip-path प्रीफ़िक्स केवल बहुत पुराने मोबाइल Safari के लिए चाहिए।
polygon मोड कैसे काम करता है?
polygon मोड में प्रीव्यू हर वर्टेक्स को खींचने योग्य बिंदु के रूप में दिखाता है। बिंदु को खींचकर हिलाएँ, खाली जगह पर डबल-क्लिक करके नया पॉइंट जोड़ें, किसी पॉइंट पर क्लिक करके चुनें और डिलीट बटन से हटाएँ। CSS वैल्यू प्रतिशत निर्देशांक के साथ रीयल टाइम अपडेट होती है।
polygon() में प्रतिशत का क्या मतलब है?
हर वर्टेक्स तत्व के ऊपरी-बाएँ कोने से मापा गया X Y प्रतिशत जोड़ा होता है। वैल्यू तत्व के आकार पर निर्भर होने से शेप तत्व के साथ स्केल होता है और हर स्क्रीन चौड़ाई पर रेस्पॉन्सिव रहता है।
circle, ellipse और inset में क्या अंतर है?
circle(त्रिज्या at x y) एक ही त्रिज्या वाला वृत्त काटता है, ellipse(rx ry at x y) अलग क्षैतिज और लंबवत त्रिज्या देता है, और inset(ऊपर दाएँ नीचे बाएँ) हर किनारे से अंदर खिंचा आयत काटता है। यह टूल हर पैरामीटर के लिए स्लाइडर और नंबर इनपुट देता है।
क्या clip-path लेआउट या क्लिक पर असर डालता है?
clip-path केवल विज़ुअल है। तत्व लेआउट में अपना मूल बॉक्स रखता है, आस-पास कुछ नहीं हिलता। लेकिन क्लिक जैसे पॉइंटर इवेंट केवल कटे हुए दिखने वाले हिस्से में काम करते हैं, जिससे कस्टम आकार के बटन बनाना आसान होता है।
क्या clip-path को एनिमेट किया जा सकता है?
हाँ। जब शेप फंक्शन और पॉइंट संख्या मेल खाती है, तो ब्राउज़र दो clip-path वैल्यू के बीच स्मूद ट्रांज़िशन करते हैं — जैसे बड़े inset से छोटे inset तक, या समान वर्टेक्स संख्या वाले दो पॉलीगॉन के बीच। CSS transition प्रॉपर्टी से इसे एनिमेट करें।
क्या मेरी इमेज या डेटा कहीं अपलोड होता है?
नहीं। प्रीव्यू इमेज कैनवस पर लोकल बनाया गया ग्रेडिएंट है और सारी गणना आपके ब्राउज़र में होती है। आपका बनाया कुछ भी सर्वर पर नहीं जाता, इसलिए लोड होने के बाद टूल ऑफ़लाइन भी चलता है।
clip-path के सामान्य उपयोग क्या हैं?
लोकप्रिय उपयोगों में तिरछे हीरो सेक्शन, हेक्सागोनल या गोल अवतार मास्क, त्रिकोणीय स्पीच बबल पॉइंटर, क्रिएटिव फोटो कोलाज, कार्ड के कट कोने और कस्टम आकार के बटन शामिल हैं — बिना किसी इमेज एडिटिंग सॉफ़्टवेयर के।
CSS क्लिप पाथ जनरेटर का उपयोग कैसे करें
इमेज एडिट किए बिना CSS clip-path से किसी भी एलिमेंट को शेप दें। शेप फ़ंक्शन चुनें, हैंडल ड्रैग करें और प्रोडक्शन-रेडी CSS कॉपी करें। सब कुछ आपके ब्राउज़र में लोकल चलता है।
- मोड चुनें: Polygon, Circle, Ellipse या Inset।
- Polygon मोड में वर्टेक्स डॉट्स को ड्रैग करें, खाली जगह पर डबल-क्लिक करके पॉइंट जोड़ें, और डिलीट करने से पहले एक को चुनें।
- Circle, Ellipse और Inset मोड में हर वैल्यू को स्लाइडर से फ़ाइन-ट्यून करें या सटीक प्रतिशत टाइप करें।
- देखें कि लाइव प्रीव्यू लोकली बने ग्रेडिएंट सैंपल इमेज पर कैसे अपडेट होता है।
- सिंगल-लाइन clip-path रूल कॉपी करें और अपनी स्टाइलशीट में पेस्ट कर दें।
दो स्थितियों में polygon के पॉइंट्स की संख्या बराबर रखें — फिर CSS transition से आप शेप को स्मूद ऐनिमेट कर सकते हैं।
संबंधित टूल
- CSS बॉक्स शैडो जनरेटर मुफ्त ऑनलाइन CSS box-shadow जनरेटर। समायोज्य ऑफसेट, ब्लर, स्प्रेड, रंग और इनसेट के साथ विज़ुअली सुंदर छायाएं बनाएं। लाइव पूर्वावलोकन और तत्काल कोड कॉपी।
- CSS ग्रेडिएंट जनरेटर विज़ुअली शानदार CSS ग्रेडिएंट बनाएं। कई रंग स्टॉप, कस्टम कोण और स्थितियों के साथ रैखिक, रेडियल और कोनिक ग्रेडिएंट उत्पन्न करें। तुरंत प्रोडक्शन-रेडी कोड कॉपी करें।
- बॉर्डर रेडियस जेनरेटर मुफ्त ऑनलाइन बॉर्डर रेडियस जेनरेटर। 8 हैंडल खींचें या ब्लॉब प्रीसेट चुनें, जैविक CSS आकार बनाएं और कोड तुरंत कॉपी करें।
- रंग परिवर्तक मुफ्त ऑनलाइन रंग परिवर्तक। विज़ुअल पिकर के साथ HEX, RGB, HSL, HSV प्रारूपों को तुरंत बदलें। 100% निजी, आपके ब्राउज़र में चलता है।
- CSS ईज़िंग जनरेटर मुफ़्त ऑनलाइन CSS ईज़िंग जनरेटर। इंटरैक्टिव कर्व पर cubic-bezier कंट्रोल पॉइंट खींचें, 18 प्रीसेट में से चुनें, लूपिंग बॉल प्रीव्यू देखें और टाइमिंग फंक्शन तुरंत कॉपी करें।
- CSS टेक्स्ट शैडो जनरेटर मुफ़्त ऑनलाइन text-shadow जनरेटर। ऑफसेट, ब्लर, रंग और अस्पष्टता के साथ कई शैडो लेयर स्टैक करें, नियॉन, 3D, रेट्रो प्रीसेट आज़माएँ और CSS तुरंत कॉपी करें।
- CSS ब्यूटीफायर CSS कोड को तुरंत प्रारूपित और सुंदर बनाएं। अनुकूलन योग्य विकल्पों के साथ मिनीफाइड CSS को पठनीय कोड में बदलें।
- CSS मिनीफायर मुफ्त ऑनलाइन CSS मिनीफायर। व्हाइटस्पेस, टिप्पणियाँ और अनावश्यक वर्ण हटाकर CSS कोड को तुरंत संपीड़ित और अनुकूलित करें। तेज़ वेब प्रदर्शन के लिए फ़ाइल आकार घटाएँ।