How to create amazing effects with CSS Shapes

Sep 12, 2025
कैसे करना है
A Clipping Demo title

फ्रंटेंड डेवलपर्स आयताकार में सोचते हैं; आयताकार आयताकार के अंदर आयताकार के अंदर आयताकार के अंदर आयताकार। हम सर्कल या त्रिकोण बनाने के लिए सीमाओं के साथ चालें नियुक्त कर सकते हैं, लेकिन वास्तव में वे अभी भी भेस में आयताकार बक्से हैं। वैसे यह बदलने वाला है सीएसएस आकार, ए W3C उम्मीदवार की सिफारिश जो आपके विचार के तरीके को बदल देगी।

सीएसएस आकार आपको आकार कार्यों का उपयोग करके ज्यामितीय आकार बनाने की अनुमति देते हैं: सर्कल (), इलिप्सिस (), इन्सेट () और बहुभुज (), और उन्हें क्लिपिंग और फ़िल्टर जैसे तत्वों या प्रभावों पर लागू करें। और भी, आकार सामग्री के प्रवाह को प्रभावित कर सकते हैं, जिससे आप परिपत्र अवतार जैसी सुविधाओं के आसपास अच्छी तरह से पाठ लपेट सकते हैं।

शायद सबसे शक्तिशाली आकार समारोह बहुभुज है () क्योंकि यह आपको समन्वयित जोड़े का उपयोग करके परिभाषित असीमित बिंदुओं का उपयोग करके जटिल मनमानी आकार बनाने देता है। यदि आपने उपयोग किया है एसवीजी , यह आपसे परिचित होगा।

इस ट्यूटोरियल में, हम क्लिप-पथ संपत्ति के साथ बहुभुज का उपयोग करेंगे ताकि हमारे पाठ से ज्यामितीय आकार काट सकें ताकि केवल बहुभुज के भीतर संलग्न क्षेत्र दिखाई दे। प्रभाव को जीवन में लाने के लिए हम कुछ सरल संक्रमण भी जोड़ देंगे। आप इस रेपो में प्रत्येक चरण के लिए कोड को पकड़ सकते हैं गिथब, यहाँ [4 9] ।

01. HTML के साथ शुरू करें

सबसे पहले, आइए हमारे HTML तैयार करें। हमें बस एक की जरूरत है & lt; div & gt; , हमारी .क्लिप कक्षा और हमारा पाठ, लेकिन जैसा कि हम इस प्रभाव के लिए छद्म-तत्वों का उपयोग करेंगे, हम पाठ के समान मूल्य के साथ एक विशेषता भी जोड़ देंगे ताकि हम इसे हार्ड-कोडिंग के बजाय सीएसएस में पढ़ सकें। 

 & lt; div class = "क्लिप" डेटा-सामग्री = "एक क्लिपिंग डेमो" & gt;
एक क्लिपिंग डेमो
& lt; / div & gt;

इसके बाद, हम इसे स्क्रीन भरना चाहते हैं और टेक्स्ट डेड सेंटर को संरेखित करना चाहते हैं - हम कुछ का उपयोग कर सकते हैं फ्लेक्सबॉक्स इसके लिए जादू। चलो पाठ शैली और आकार भी। 

। क्लिप {
// भरें स्क्रीन
स्थिति: पूर्ण;
शीर्ष: 0;
बाएं: 0;
चौड़ाई: 100%;
ऊंचाई: 100%;
// संरेखण
प्रदर्शन: फ्लेक्स; // संरेखण के लिए फ्लेक्स का उपयोग करें
औचित्य-सामग्री: केंद्र; // क्षैतिज संरेखण
संरेखित आइटम: केंद्र; // लंबवत संरेखण
// पाठ स्टाइल
फ़ॉन्ट-परिवार: 'काम सैन्स', एरियल, हेल्वेटिका, सैन्स-सेरिफ़; // कार्य SANS Google फोंट से उपलब्ध है
फ़ॉन्ट-वजन: 800;
फ़ॉन्ट आकार: 8rem;
पाठ-संरेखण: केंद्र;
पाठ-परिवर्तन: अपरकेस;
}

02. कुछ शैली जोड़ें

अब हम स्टाइल कर सकते हैं ::इससे पहले तथा ::उपरांत छद्म-तत्व, प्रत्येक पाठ के शीर्ष पर एक परत बनने के साथ। डिफ़ॉल्ट रूप से, ::उपरांत उच्चतम जेड-इंडेक्स होगा। हाथी art () चयनकर्ता हमारे मूल्य को पढ़ेगा डेटा सामग्री विशेषता।

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

। क्लिप {
...
// स्थिति स्वयं (& amp;) और छद्म-तत्व (पहले / बाद में)
& amp ;;
& amp; :: पहले,
& amp; :: के बाद {
  स्थिति: पूर्ण;
  शीर्ष: 0;
  बाएं: 0;
  चौड़ाई: 100%;
  ऊंचाई: 100%;
  प्रदर्शन: फ्लेक्स; // संरेखण के लिए फ्लेक्स का उपयोग करें
  औचित्य-सामग्री: केंद्र; // क्षैतिज संरेखण
  संरेखित आइटम: केंद्र; // लंबवत संरेखण
}
& amp; :: पहले,
& amp; :: के बाद {
  सामग्री: attr (डेटा-सामग्री); // सामग्री के रूप में विशेषता मान का उपयोग करें
}
}

ब्राउज़र में परिणाम समान दिखना चाहिए, क्योंकि छद्म-तत्व सीधे पाठ के शीर्ष पर बैठे हैं। आप अपनी शैलियों को संशोधित कर सकते हैं [9 1] देवटूल

यह देखने के लिए कि वे कैसे स्तरित हैं।

03. पृष्ठभूमि और रंग सेट करें

प्रत्येक परत को एक अलग रंग और पृष्ठभूमि देने का समय - चलो कुछ बोल्ड, ऑन-प्रवृत्ति, नियॉन रंगों के लिए जाएं जिन्हें हमने चर के रूप में पूर्वनिर्धारित किया है। हम एचटीएमएल में इन्हें जोड़ने के बजाय सीएसएस पैडिंग चाल का उपयोग करके कई पंक्तियों पर लपेटने के लिए पाठ को भी मजबूर कर सकते हैं।

यह सहायक है क्योंकि अन्यथा हमें दो अलग-अलग प्रकार के लाइन ब्रेक का उपयोग करना होगा: & lt; br & gt; के अंदर & lt; div & gt; और अधिक अस्पष्ट \ए विशेषता में। 

। क्लिप {
...
& amp ;;
& amp; :: पहले,
& amp; :: के बाद {
  पैडिंग: 0 50%;
  बॉक्स आकार का आकार: सीमा-बॉक्स;
}
& amp; :: पहले {
  रंग: $ सफेद;
  पृष्ठभूमि: $ गुलाबी;
}
& amp; :: के बाद {
  रंग: $ गुलाबी;
  पृष्ठभूमि: $ नीला;
}
}

पैडिंग चाल टेक्स्ट शून्य क्षैतिज चौड़ाई देकर काम करती है, जिससे ब्राउज़र को प्रत्येक शब्द को एक नई लाइन में लपेटने के लिए मजबूर किया जाता है।

04. पाठ को क्लिप करें

दिलचस्प बिट के लिए समय - हम अपने पाठ को क्लिप करना शुरू करने के लिए तैयार हैं। हम एक विकर्ण क्लिप बनाने जा रहे हैं, स्क्रीन को निचले बाएं से ऊपर दाएं से दो त्रिकोणों में स्लाइस कर रहे हैं।

::इससे पहले छद्म-तत्व केवल ऊपरी बाएं त्रिकोण में दिखाई देगा, और ::उपरांत छद्म-तत्व केवल निचले दाएं त्रिकोण में दिखाई देगा। यहां प्राप्त करने के लिए कोड यहां दिया गया है: 

। क्लिप {
...
& amp; :: पहले {
  क्लिप-पथ: बहुभुज (0 0, 100% 0, 0 100%, 0 100%);
}
& amp; :: के बाद {
  क्लिप-पथ: बहुभुज (100% 0, 100% 100%, 0 100%, 100% 0);
}
}

यह चार अंक के साथ बहुभुज बनाता है। प्रत्येक बिंदु को समन्वय जोड़ी द्वारा वर्णित किया गया है; बस एक एक्स (बाएं से दाएं) और वाई (ऊपर से नीचे) मूल्य। मान पूर्ण हो सकता है (उदाहरण के लिए: पीएक्स) या रिश्तेदार (उदाहरण के लिए:%)। अंक ऊपर बाईं ओर संदर्भित हैं, इसलिए अंक 100% 100% नीचे दाईं ओर हैं।

आदेश में प्रत्येक बिंदु को जोड़ने वाली रेखाओं की कल्पना करें कि वे आकार बनाने के लिए सूचीबद्ध हैं। में ::इससे पहले पॉलीगॉन यह शीर्ष बाईं ओर शुरू होता है (0 0) , स्क्रीन पर ऊपर दाईं ओर चलता है (100% 0) , और फिर नीचे बाईं ओर नीचे (0 100%) ।

उम्मीद है कि अब आप अपने क्लिप किए गए टेक्स्ट को देख रहे होंगे। ब्राउज़र का आकार बदलें और आप तदनुसार क्लिपिंग प्रतिक्रिया देखेंगे।

यदि आप क्रोम का उपयोग कर रहे हैं, तो आप शायद क्रोम की समग्र परतों के कारण आकार बदलने के दौरान कुछ प्रतिष्ठित मुद्दों को देखेंगे। दुर्भाग्य से, क्योंकि डेमो पूर्ण-स्क्रीन है, अनुशंसित विल-चेंज: ट्रांसफॉर्म संपत्ति और ट्रांसफॉर्म: अनुवाद (0) हैक इसे सुधार नहीं है। हालांकि, अगर आप स्विच करते हैं .क्लिप सेवा मेरे स्थिति: फिक्स्ड; यह काम करता है। 

 क्लिप {
& amp ;;
& amp; :: पहले,
& amp; :: के बाद {
  स्थिति: फिक्स्ड;
}
}

ध्यान रखें कि क्रोम सहायक होने की कोशिश कर रहा है, और इस कामकाज का प्रदर्शन पर असर पड़ेगा। उत्पादन में इस तरह की चीजें करते समय प्रदर्शन को प्रोफाइल करना सुनिश्चित करें।

05. संक्रमण जोड़ें

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

राज्य 1: यह प्रारंभिक राज्य है, इसलिए चलिए तीन अन्य बनाते हैं

जब आप जाते हैं तो अपने सीएसएस के नीचे प्रत्येक ब्लॉक को जोड़ें, ताकि आप देख सकें कि यह कैसा दिखता है।

राज्य 2: पृष्ठभूमि को प्रकट करने के लिए त्रिकोण को थोड़ा अलग करें

यह कांगो गणराज्य के ध्वज की तरह थोड़ा सा दिखाई देगा। प्रत्येक बहुभुज त्रिभुज की नोक से 20 प्रतिशत को हटाने से चाल होगी।

राज्य 3: त्रिकोणों को आयतों में मॉर्फ करें

यह फ्रांसीसी tricolor के समान है, रिवर्स में।

चौथे समन्वय जोड़ी के बारे में क्या? खैर, यह वह जगह है जहां यह उपयोगी होता है। यह पता चला है कि संक्रमण क्लिप-पथ केवल तभी काम करता है जब आकार फ़ंक्शन का उपयोग किया जाता है (तो बहुभुज और जीटी; बहुभुज) और उपयोग किए गए बिंदुओं की संख्या समान है - ब्राउज़र प्रत्येक व्यक्तिगत बिंदु को संक्रमण करेगा। यही कारण है कि हमारे पास चौथा छुपा बिंदु है - यह हमें त्रिभुज से एक आयताकार तक संक्रमण संक्रमण करने की अनुमति देता है, हम सिर्फ उस चौथे बिंदु को प्रकट करते हैं जब हमें इसकी आवश्यकता होती है। 

। क्लिप {
& amp; :: पहले {
  क्लिप-पथ: बहुभुज (0 0, 40% 0, 40% 100%, 0 100%);
}
& amp; :: के बाद {
  क्लिप-पथ: बहुभुज (100% 0, 100% 100%, 60% 100%, 60% 0);
}
}

राज्य 4: उन बहुभुजों को मोड़ो

हमारी ध्वज थीम के लिए चिपके हुए, यह मैरीटाइम ध्वज सिग्नलिंग की दुनिया में 'मुझे एक टग की आवश्यकता' जैसा होगा।

यहां हम बहुभुजों को घुमा रहे हैं ताकि वे केंद्र में पार हो जाएं और प्रत्येक दो त्रिकोण बनाते हैं। यह तब होता है जब संक्रमण आपको समन्वयित जोड़े को समझने में मदद कर सकते हैं। संक्रमण को धीमा करके, आप देख सकते हैं कि प्रत्येक बिंदु स्क्रीन पर अपनी नई स्थिति में कैसे चलता है, और आप यह समझना शुरू करते हैं कि जोड़े का ऑर्डर कैसे संक्रमण को प्रभावित करता है। यह वास्तव में आपको संक्रमण पर काफी नियंत्रण देता है। 

। क्लिप {
& amp; :: पहले {
  क्लिप-पथ: बहुभुज (100% 0, 0 0, 100% 100%, 0 100%);
}
& amp; :: के बाद {
  क्लिप-पथ: बहुभुज (100% 0, 100% 100%, 0 0, 0 100%);
}
}

लपेटें

हम सब सेट हैं लेकिन हम अभी तक राज्यों को बदलने में सक्षम नहीं हैं, जिसका अर्थ है कि आप कार्रवाई में संक्रमण नहीं देख सकते हैं। इसे प्राप्त करने के कई तरीके हैं, इसलिए यह आपके ऊपर है। रेपो और कोडेपेन में, मैंने छुपे हुए रेडियो बटन और ~ सामान्य भाई-बहन चयनकर्ता के साथ 100 प्रतिशत जावास्क्रिप्ट-फ्री समाधान का उपयोग किया है - एक नज़र डालें। आप इस ट्यूटोरियल के कोडपेन को भी देख सकते हैं [1 9 7] यहां

।

यह लेख मूल रूप से अंक 298 में दिखाई दिया जाल , पेशेवर वेब डिजाइनरों और डेवलपर्स के लिए पत्रिका - नवीनतम नए वेब रुझान, प्रौद्योगिकियों और तकनीकों की पेशकश। [20 9] यहां अंक 298 खरीदें

या यहां नेट की सदस्यता लें ।

विशेष क्रिसमस प्रस्ताव: नेट के लिए सदस्यता पर 47% तक बचाएं [4 9] आपके लिए या क्रिसमस के लिए एक दोस्त। यह एक सीमित प्रस्ताव है, तो जल्दी से आगे बढ़ें ...

संबंधित आलेख:

    [2 9] 28 सीएसएस के उत्कृष्ट उदाहरण
[2 9] सीएसएस आकार के साथ पिरामिड लेआउट कैसे बनाएं [2 9] सीएसएस ट्रिक्स अपने वेब लेआउट को क्रांतिकारी बनाने के लिए

कैसे करना है - सर्वाधिक लोकप्रिय लेख

फ़ोटोशॉप में फोंट कैसे जोड़ें

कैसे करना है Sep 12, 2025

(छवि क्रेडिट: एडोब) [1 9] फ़ोटोशॉप में फ़ॉन्ट�..

Work image mask magic with Houdini

कैसे करना है Sep 12, 2025

यदि आप हुदिनी के बारे में अधिक जानने में रुचि रख..

Colourise greyscale work in Photoshop

कैसे करना है Sep 12, 2025

[1 1] अंतिम छवि को पूर्ण आकार देखने के लिए श..

Make your characters pop with colour and light

कैसे करना है Sep 12, 2025

मुझे वास्तव में रंग में काम करना पसंद है, चाहे वह अ..

How to influence Google rankings with your content

कैसे करना है Sep 12, 2025

आपकी सामग्री कहीं भी नहीं जा रही है जब तक कि लोग खो..

How to create manga with a Wild West twist

कैसे करना है Sep 12, 2025

वेस्टर्न कुछ हैं जो मैंने हमेशा प्यार किया है। इस..

Speed up your 3D modelling

कैसे करना है Sep 12, 2025

इस ट्यूटोरियल में एक संपत्ति बनाने की प्रक्रिया �..

How to get your ZBrush model into Maya

कैसे करना है Sep 12, 2025

इसके लिए माया ट्यूटोरियल मैं आपको यह दिखान�..

श्रेणियाँ