CSS में बनाने के लिए वेव शायद सबसे कठिन आकृतियों में से एक है। हम हमेशा इसे जैसे गुणों के साथ अनुमानित करने का प्रयास करते हैं border-radius और बहुत सारी जादुई संख्याएँ जब तक हमें कुछ ऐसा न मिल जाए जो थोड़े करीब महसूस हो। और इससे पहले कि हम लहरदार पैटर्न में भी उतरें, जो कि अधिक कठिन हैं।
"एसवीजी यह!" आप कह सकते हैं, और आप शायद सही कह रहे हैं कि यह जाने का एक बेहतर तरीका है। लेकिन हम देखेंगे कि सीएसएस अच्छी तरंगें बना सकता है और इसके लिए कोड को पागल होना जरूरी नहीं है। और क्या? मेरे पास है एक ऑनलाइन जनरेटर इसे और भी तुच्छ बनाने के लिए!
यदि आप जनरेटर के साथ खेलते हैं, तो आप देख सकते हैं कि जिस सीएसएस से यह निकलता है वह केवल दो ग्रेडियेंट और एक सीएसएस मास्क संपत्ति है - केवल वे दो चीजें और हम किसी भी प्रकार की तरंग आकार या पैटर्न बना सकते हैं। यह उल्लेख करने के लिए नहीं कि हम लहरों के आकार और वक्रता को आसानी से नियंत्रित कर सकते हैं जब हम उस पर हों।
कुछ मान इस तरह दिख सकते हैं "जादू नंबर” लेकिन वास्तव में उनके पीछे तर्क है और हम कोड को विच्छेदित करेंगे और तरंगें बनाने के पीछे के सभी रहस्यों की खोज करेंगे।
यह लेख एक अनुवर्ती है एक पिछला वाला जहां मैंने सभी प्रकार के अलग-अलग ज़िग-ज़ैग, स्कोप्ड, स्कैलप्ड, और हाँ, लहराती सीमा सीमाएँ बनाईं। मैं उस लेख की जांच करने की अत्यधिक अनुशंसा करता हूं क्योंकि यह उसी तकनीक का उपयोग करता है जिसे हम यहां कवर करेंगे, लेकिन अधिक विस्तार से।
लहरों के पीछे का गणित
कड़ाई से बोलते हुए, लहराती आकृतियों के पीछे एक जादू का सूत्र नहीं है। वक्रों वाली कोई भी आकृति जो ऊपर और नीचे जाती है, तरंग कहलाती है, इसलिए हम खुद को जटिल गणित तक सीमित नहीं रखने जा रहे हैं। इसके बजाय, हम ज्यामिति की मूल बातों का उपयोग करके एक तरंग को पुन: उत्पन्न करेंगे।
आइए दो वृत्त आकृतियों का उपयोग करते हुए एक सरल उदाहरण से प्रारंभ करें:
हमारे पास एक दूसरे के बगल में समान त्रिज्या वाले दो वृत्त हैं। क्या आपको वह लाल रेखा दिखाई दे रही है? यह पहले सर्कल के ऊपरी आधे हिस्से और दूसरे सर्कल के निचले आधे हिस्से को कवर करता है। अब कल्पना कीजिए कि आप उस लाइन को लेते हैं और उसे दोहराते हैं।
हम पहले से ही लहर देखते हैं। अब निम्नलिखित प्राप्त करने के लिए नीचे के भाग (या ऊपर वाले) को भरें:
टाडा! हमारे पास एक लहरदार आकार है, और एक जिसे हम सर्कल त्रिज्या के लिए एक चर का उपयोग करके नियंत्रित कर सकते हैं। यह सबसे आसान तरंगों में से एक है जिसे हम बना सकते हैं और यह वही है जिसे मैंने दिखाया था this पिछले लेख
आइए पहले दृष्टांत को लेकर और मंडलियों को थोड़ा घुमाकर थोड़ी जटिलता जोड़ें:
हमारे पास अभी भी समान त्रिज्या वाले दो वृत्त हैं लेकिन वे अब क्षैतिज रूप से संरेखित नहीं हैं। इस मामले में, लाल रेखा अब प्रत्येक सर्कल के आधे क्षेत्र को कवर नहीं करती है, बल्कि एक छोटे से क्षेत्र को कवर करती है। यह क्षेत्र धराशायी लाल रेखा द्वारा सीमित है। वह रेखा उस बिंदु को पार करती है जहां दोनों वृत्त मिलते हैं।
अब उस रेखा को लें और इसे दोहराएं और आपको एक और लहर मिलती है, एक चिकनी।
मुझे लगता है कि आपको विचार समझ आ गया है। मंडलियों की स्थिति और आकार को नियंत्रित करके, हम अपनी इच्छानुसार कोई भी तरंग बना सकते हैं। हम उनके लिए वेरिएबल भी बना सकते हैं, जिन्हें मैं कहूंगा P और S, क्रमशः।
आपने शायद देखा होगा कि, ऑनलाइन जनरेटर में, हम दो इनपुट का उपयोग करके तरंग को नियंत्रित करते हैं। वे उपरोक्त चर के लिए मैप करते हैं। S "लहर का आकार" है और P "लहर की वक्रता" है।
मैं परिभाषित कर रहा हूँ P as P = m*S जहां m वह चर है जिसे आप तरंग की वक्रता को अद्यतन करते समय समायोजित करते हैं। यह हमें हमेशा समान वक्रता रखने की अनुमति देता है, भले ही हम S को अपडेट करें।
m के बीच कोई भी मूल्य हो सकता है 0 और 2. 0 हमें पहला विशेष मामला देगा जहां दोनों मंडल क्षैतिज रूप से संरेखित हैं। 2 एक प्रकार का अधिकतम मूल्य है। हम बड़े हो सकते हैं, लेकिन कुछ परीक्षणों के बाद मैंने पाया कि ऊपर कुछ भी 2 खराब, सपाट आकार पैदा करता है।
आइए अपने वृत्त की त्रिज्या को न भूलें! इसका उपयोग करके भी परिभाषित किया जा सकता है S और P इस तरह:
R = sqrt(P² + S²)/2. P के बराबर है 0, हमारे पास होगा R = S/2.
सीएसएस में इन सभी को ग्रेडिएंट में बदलना शुरू करने के लिए हमारे पास सब कुछ है!
ग्रेडिएंट बनाना
हमारी तरंगें मंडलियों का उपयोग करती हैं, और मंडलियों के बारे में बात करते समय हम रेडियल ग्रेडियेंट के बारे में बात करते हैं। और चूंकि दो वृत्त हमारी तरंग को परिभाषित करते हैं, हम तार्किक रूप से दो रेडियल ग्रेडिएंट का उपयोग करेंगे।
हम उस विशेष मामले से शुरू करेंगे जहां P के बराबर है 0. यहाँ पहली ढाल का चित्रण है:
यह ढाल पूरे निचले क्षेत्र को भरते हुए पहली वक्रता बनाती है—लहर का "पानी" ऐसा बोलने के लिए।
.wave {
--size: 50px;
mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}RSI --size चर त्रिज्या और रेडियल ढाल के आकार को परिभाषित करता है। अगर हम इसकी तुलना से करते हैं S चर, तो यह बराबर है S/2.
अब दूसरा ग्रेडिएंट जोड़ते हैं:
दूसरी ढाल हमारी लहर को पूरा करने के लिए एक चक्र के अलावा और कुछ नहीं है:
radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%यदि आप इसे पिछला लेख आप देखेंगे कि मैं वही दोहरा रहा हूं जो मैंने वहां पहले ही किया था।
मैंने दोनों लेखों का अनुसरण किया लेकिन ग्रेडिएंट कॉन्फ़िगरेशन समान नहीं हैं।
ऐसा इसलिए है क्योंकि हम विभिन्न ग्रेडिएंट कॉन्फ़िगरेशन का उपयोग करके एक ही परिणाम तक पहुँच सकते हैं। यदि आप दोनों विन्यासों की तुलना करते हैं, तो आपको संरेखण में थोड़ा अंतर दिखाई देगा, लेकिन चाल समान है। यदि आप ग्रेडिएंट से अपरिचित हैं तो यह भ्रमित करने वाला हो सकता है, लेकिन चिंता न करें। कुछ अभ्यास के साथ, आप उनके अभ्यस्त हो जाते हैं और आप स्वयं पाएंगे कि विभिन्न वाक्य-विन्यास एक ही परिणाम की ओर ले जा सकते हैं।
यहाँ हमारी पहली लहर के लिए पूरा कोड है:
.wave {
--size: 50px;
mask:
radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}अब इस कोड को लेते हैं और इसे उस स्थान पर समायोजित करते हैं जहां हम एक चर पेश करते हैं जो इसे किसी भी तरंग को बनाने के लिए पूरी तरह से पुन: प्रयोज्य बनाता है। जैसा कि हमने पिछले अनुभाग में देखा था, मुख्य चाल है मंडलियों को स्थानांतरित करना ताकि वे अब संरेखित न हों तो आइए प्रत्येक की स्थिति को अपडेट करें। हम पहले एक को ऊपर और दूसरे को नीचे ले जाएंगे।
हमारा कोड इस तरह दिखेगा:
.wave {
--size: 50px;
--p: 25px;
mask:
radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}मैंने एक नया पेश किया है --p वेरिएबल जिसका उपयोग प्रत्येक सर्कल की केंद्र स्थिति को परिभाषित करने के लिए किया जाता है। पहला ग्रेडिएंट उपयोग कर रहा है 50% calc(-1*var(--p)), इसलिए इसका केंद्र ऊपर की ओर बढ़ता है जबकि दूसरा उपयोग कर रहा है calc(var(--size) + var(--p)) इसे नीचे ले जाने के लिए।
एक डेमो एक हजार शब्दों के लायक है:
वृत्त न तो संरेखित होते हैं और न ही एक दूसरे को स्पर्श करते हैं। हमने उनकी त्रिज्या को बदले बिना उन्हें बहुत दूर रखा, इसलिए हमने अपनी लहर खो दी। लेकिन हम उसी गणित का उपयोग करके चीजों को ठीक कर सकते हैं जिसका उपयोग हमने पहले नए त्रिज्या की गणना के लिए किया था। उसे याद रखो R = sqrt(P² + S²)/2. हमारे मामले में, --size के बराबर है S/2; उसी के लिए --p जो के बराबर भी है P/2 चूँकि हम दोनों वृत्तों को घुमा रहे हैं। तो, उनके केंद्र बिंदुओं के बीच की दूरी . के मान से दोगुनी है --p इसके लिए:
R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))यह हमें का परिणाम देता है 55.9px.
हमारी लहर वापस आ गई है! आइए उस समीकरण को हमारे CSS में प्लग करें:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p) * var(--p) + var(--size)*var(--size));
mask:
radial-gradient(var(--R) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0 / calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(-1*var(--p)), #0000 99%, #000 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}यह मान्य सीएसएस कोड है। sqrt() विनिर्देश का हिस्सा है, लेकिन जिस समय मैं इसे लिख रहा हूं, उसके लिए कोई ब्राउज़र समर्थन नहीं है। इसका मतलब है कि जब तक हम व्यापक नहीं हो जाते, तब तक हमें उस मूल्य की गणना करने के लिए जावास्क्रिप्ट या सैस के छिड़काव की आवश्यकता होती है sqrt() समर्थन करें.
यह बहुत अच्छा है: एक शांत लहर प्राप्त करने के लिए केवल दो ग्रेडिएंट लगते हैं जिन्हें आप किसी भी तत्व पर लागू कर सकते हैं mask संपत्ति। कोई और परीक्षण और त्रुटि नहीं - आपको केवल दो चर अपडेट करने की आवश्यकता है और आप जाने के लिए अच्छे हैं!
लहर को उलटना
क्या होगा अगर हम चाहते हैं कि लहरें दूसरी दिशा में जाएं, जहां हम "पानी" के बजाय "आकाश" भर रहे हैं। मानो या न मानो, हमें केवल दो मानों को अपडेट करना है:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p) * var(--p) + var(--size) * var(--size));
mask:
radial-gradient(var(--R) at 50% calc(100% - (var(--size) + var(--p))), #000 99%, #0000 101%)
calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(100% + var(--p)), #0000 99%, #000 101%)
50% calc(100% - var(--size)) / calc(4 * var(--size)) 100% repeat-x;
}मैंने वहां जो कुछ किया वह बराबर एक ऑफसेट जोड़ रहा है 100%, ऊपर प्रकाश डाला। यहाँ परिणाम है:
हम इसे और भी आसान बनाने के लिए कीवर्ड मानों का उपयोग करके अधिक अनुकूल सिंटैक्स पर विचार कर सकते हैं:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size) * var(--size));
mask:
radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%)
left 50% bottom var(--size) / calc(4 * var(--size)) 100% repeat-x;
}हम उपयोग कर रहे हैं left और bottom पक्ष और ऑफसेट निर्दिष्ट करने के लिए कीवर्ड। डिफ़ॉल्ट रूप से, ब्राउज़र डिफ़ॉल्ट रूप से left और top — इसलिए हम उपयोग करते हैं 100% तत्व को नीचे ले जाने के लिए। वास्तव में, हम इसे से ले जा रहे हैं top by 100%, तो यह वास्तव में कहने जैसा ही है bottom. गणित की तुलना में पढ़ना बहुत आसान है!
इस अद्यतन सिंटैक्स के साथ, हमें केवल स्वैप करना है bottom एसटी top - या इसके विपरीत - लहर की दिशा बदलने के लिए।
और यदि आप ऊपर और नीचे दोनों तरंगें प्राप्त करना चाहते हैं, तो हम एक ही घोषणा में सभी ग्रेडिएंट्स को जोड़ते हैं:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));
mask:
/* Gradient 1 */
radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%)
left calc(50% - 2*var(--size)) bottom 0 / calc(4 * var(--size)) 51% repeat-x,
/* Gradient 2 */
radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%)
left 50% bottom var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x,
/* Gradient 3 */
radial-gradient(var(--R) at left 50% top calc(var(--size) + var(--p)), #000 99%, #0000 101%)
left calc(50% - 2 * var(--size)) top 0 / calc(4 * var(--size)) 51% repeat-x,
/* Gradient 4 */
radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), #0000 99%, #000 101%)
left 50% top var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x;
}यदि आप कोड की जांच करते हैं, तो आप देखेंगे कि सभी ग्रेडियेंट के संयोजन के अलावा, मैंने उनकी ऊंचाई भी कम कर दी है 100% सेवा मेरे 51% ताकि वे दोनों तत्व के आधे हिस्से को ढक लें। हाँ, 51%. हमें एक छोटे से ओवरलैप के लिए थोड़ा अतिरिक्त प्रतिशत चाहिए जो अंतराल से बचें।
बाएँ और दाएँ पक्षों के बारे में क्या?
यह तुम्हारा गृहकार्य है! ऊपर और नीचे के पक्षों के साथ हमने जो किया उसे लें और दाएं और बाएं मान प्राप्त करने के लिए मूल्यों को अपडेट करने का प्रयास करें। चिंता न करें, यह आसान है और केवल एक चीज जो आपको करने की ज़रूरत है वह है मूल्यों की अदला-बदली करना।
अगर आपको परेशानी है, तो आप हमेशा इस्तेमाल कर सकते हैं ऑनलाइन जनरेटर कोड की जांच करने और परिणाम की कल्पना करने के लिए।
लहरदार रेखाएं
इससे पहले, हमने लाल रेखा का उपयोग करके अपनी पहली लहर बनाई और फिर तत्व के निचले हिस्से को भर दिया। उस लहराती रेखा के बारे में क्या? वो भी एक लहर! इससे भी बेहतर यह है कि हम एक चर के साथ इसकी मोटाई को नियंत्रित कर सकते हैं ताकि हम इसका पुन: उपयोग कर सकें। हो जाए!
हम स्क्रैच से शुरू नहीं करने जा रहे हैं, बल्कि पिछले कोड को लें और इसे अपडेट करें। पहली बात यह है कि ग्रेडिएंट के रंग स्टॉप को अपडेट करना है। दोनों ग्रेडिएंट एक पारदर्शी रंग से एक अपारदर्शी रंग में शुरू होते हैं, या इसके विपरीत। एक रेखा या सीमा का अनुकरण करने के लिए, हमें पारदर्शी से शुरू करना होगा, अपारदर्शी पर जाना होगा, फिर पारदर्शी पर वापस जाना होगा:
#0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%मुझे लगता है कि आपने पहले ही अनुमान लगा लिया था कि --b चर वह है जिसका उपयोग हम लाइन की मोटाई को नियंत्रित करने के लिए कर रहे हैं। आइए इसे हमारे ग्रेडिएंट्स पर लागू करें:
हाँ, परिणाम एक लहरदार रेखा से बहुत दूर है। लेकिन करीब से देखने पर, हम देख सकते हैं कि एक ग्रेडिएंट नीचे की वक्रता को सही ढंग से बना रहा है। इसलिए, हमें वास्तव में दूसरे ग्रेडिएंट को ठीक करने की आवश्यकता है। एक पूर्ण वृत्त रखने के बजाय, आइए आंशिक एक को दूसरे ढाल की तरह बनाते हैं।
अभी भी दूर है, लेकिन हमारे पास दोनों वक्रताएं हैं जिनकी हमें आवश्यकता है! यदि आप कोड की जांच करते हैं, तो आप देखेंगे कि हमारे पास दो समान ग्रेडिएंट हैं। अंतर केवल उनकी स्थिति का है:
.wave {
--size: 50px;
--b: 10px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g))
calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%,
radial-gradient(var(--R) at left 50% top calc(-1*var(--p)), var(--_g))
50% var(--size)/calc(4*var(--size)) 100%;
}अब हमें अंतिम आकार के लिए आकार और स्थिति को समायोजित करने की आवश्यकता है। हमें अब पूर्ण-ऊंचाई होने के लिए ग्रेडिएंट की आवश्यकता नहीं है, इसलिए हम इसे बदल सकते हैं 100% इसके साथ:
/* Size plus thickness */
calc(var(--size) + var(--b))इस मान के पीछे कोई गणितीय तर्क नहीं है। यह केवल वक्रता के लिए काफी बड़ा होना चाहिए। हम पैटर्न पर इसका असर कुछ ही देर में देखेंगे। इस बीच, ग्रेडिएंट को लंबवत रूप से केंद्र में रखने की स्थिति को भी अपडेट करते हैं:
.wave {
--size: 50px;
--b: 10px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g))
calc(50% - 2*var(--size)) 50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat,
radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), var(--_g)) 50%
50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat;
}अभी भी काफी नहीं है:
एक ढाल को थोड़ा नीचे और दूसरे को थोड़ा ऊपर ले जाने की जरूरत है। दोनों को अपनी ऊंचाई के आधे से आगे बढ़ने की जरूरत है।
हम लगभग वहीँ हैं! त्रिज्या के लिए एक पूर्ण ओवरलैप होने के लिए हमें एक छोटा सा फिक्स चाहिए। दोनों पंक्तियों को आधी सीमा से ऑफसेट करने की आवश्यकता है (--b) मोटाई:
समझ गए! एक आदर्श लहरदार रेखा जिसे हम कुछ चरों को नियंत्रित करके आसानी से समायोजित कर सकते हैं:
.wave {
--size: 50px;
--b: 10px;
--p: 25px;
--R: calc(sqrt(var(--p) * var(--p) + var(--size) * var(--size)) + var(--b) / 2);
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), var(--_g))
calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x,
radial-gradient(var(--R) at left 50% top calc(-1*var(--p)),var(--_g))
50% calc(50% + var(--size)/2 + var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x;
}मुझे पता है कि तर्क को समझने में थोड़ा समय लगता है। यह ठीक है और जैसा कि मैंने कहा, सीएसएस में एक लहरदार आकार बनाना आसान नहीं है, इसके पीछे मुश्किल गणित का उल्लेख नहीं करना है। इसलिए ऑनलाइन जनरेटर एक जीवन रक्षक है - आप आसानी से अंतिम कोड प्राप्त कर सकते हैं, भले ही आप इसके पीछे के तर्क को पूरी तरह से न समझें।
लहरदार पैटर्न
हम अभी-अभी बनाई गई लहरदार रेखा से एक पैटर्न बना सकते हैं!
अरे नहीं, पैटर्न के कोड को समझना और भी मुश्किल होगा!
बिल्कुल भी नहीं! हमारे पास पहले से ही कोड है। हमें बस इतना करना है कि हटाना है repeat-x जो हमारे पास पहले से है, और टाडा से। मैं
एक अच्छा लहराती पैटर्न। उस समीकरण को याद रखें जो मैंने कहा था कि हम फिर से आएंगे?
/* Size plus thickness */
calc(var(--size) + var(--b))खैर, यह वही है जो पैटर्न में रेखाओं के बीच की दूरी को नियंत्रित करता है। हम इसमें से एक वेरिएबल बना सकते हैं, लेकिन अधिक जटिलता की कोई आवश्यकता नहीं है। मैं जनरेटर में उसके लिए एक चर का उपयोग भी नहीं कर रहा हूं। शायद मैं इसे बाद में बदल दूंगा।
यहाँ एक ही पैटर्न एक अलग दिशा में जा रहा है:
मैं आपको उस डेमो में कोड प्रदान कर रहा हूं, लेकिन मैं चाहता हूं कि आप इसे विच्छेदित करें और समझें कि ऐसा करने के लिए मैंने क्या बदलाव किए हैं।
कोड को सरल बनाना
पिछले सभी डेमो में, हम हमेशा परिभाषित करते हैं --size और --p स्वतंत्र रूप से। लेकिन क्या आपको याद है कि कैसे मैंने पहले उल्लेख किया था कि ऑनलाइन जनरेटर मूल्यांकन करता है P के बराबर m*S, जहां m तरंग की वक्रता को नियंत्रित करता है? एक निश्चित गुणक को परिभाषित करके, हम एक विशेष तरंग के साथ काम कर सकते हैं और कोड आसान हो सकता है। ज्यादातर मामलों में हमें इसकी आवश्यकता होगी: एक विशिष्ट लहराती आकृति और इसके आकार को नियंत्रित करने के लिए एक चर।
आइए अपना कोड अपडेट करें और परिचय दें m चर:
.wave {
--size: 50px;
--R: calc(var(--size) * sqrt(var(--m) * var(--m) + 1));
mask:
radial-gradient(var(--R) at 50% calc(var(--size) * (1 + var(--m))), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(-1 * var(--size) * var(--m)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}जैसा कि आप देख सकते हैं, हमें अब इसकी आवश्यकता नहीं है --p चर। मैंने इसे बदल दिया var(--m)*var(--size), और तदनुसार कुछ गणित को अनुकूलित किया। अब, यदि हम एक विशेष लहराती आकृति के साथ काम करना चाहते हैं, तो हम इसे छोड़ सकते हैं --m चर और इसे एक निश्चित मूल्य के साथ बदलें। आओ कोशिश करते हैं .8 उदाहरण के लिए.
--size: 50px;
--R: calc(var(--size) * 1.28);
mask:
radial-gradient(var(--R) at 50% calc(1.8 * var(--size)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(-.8 * var(--size)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;देखें कि कोड अब कैसे आसान है? आपकी तरंग को नियंत्रित करने के लिए केवल एक चर, साथ ही आपको अधिक निर्भर रहने की आवश्यकता नहीं है sqrt() जिसका कोई ब्राउज़र समर्थन नहीं है!
आप एक ही तर्क को उन सभी डेमो पर लागू कर सकते हैं जिन्हें हमने लहरदार रेखाओं और पैटर्न के लिए भी देखा था। मैंने एक विस्तृत गणितीय व्याख्या के साथ शुरुआत की और सामान्य कोड दिया, लेकिन वास्तविक उपयोग के मामले में आपको खुद को आसान कोड की आवश्यकता हो सकती है। मैं हर समय यही कर रहा हूं। मैं शायद ही कभी सामान्य कोड का उपयोग करता हूं, लेकिन मैं हमेशा एक सरलीकृत संस्करण पर विचार करता हूं, विशेष रूप से, ज्यादातर मामलों में, मैं कुछ ज्ञात मानों का उपयोग कर रहा हूं जिन्हें चर के रूप में संग्रहीत करने की आवश्यकता नहीं है। (बिगाड़ने चेतावनी: मैं अंत में कुछ उदाहरण साझा करूँगा!)
इस दृष्टिकोण की सीमाएं
गणितीय रूप से, हमने जो कोड बनाया है, वह हमें सही लहरदार आकार और पैटर्न देना चाहिए, लेकिन वास्तव में, हम कुछ अजीब परिणामों का सामना करेंगे। तो, हाँ, इस पद्धति की अपनी सीमाएँ हैं। उदाहरण के लिए, ऑनलाइन जनरेटर खराब परिणाम देने में सक्षम है, खासकर लहरदार लाइनों के साथ। समस्या का एक हिस्सा मूल्यों के एक विशेष संयोजन के कारण होता है जहां परिणाम खराब हो जाता है, जैसे आकार की तुलना में सीमा मोटाई के लिए एक बड़े मूल्य का उपयोग करना:
अन्य मामलों के लिए, यह कुछ गोलाई से संबंधित मुद्दा है जिसके परिणामस्वरूप लहरों के बीच गलत संरेखण और अंतराल होगा:
उस ने कहा, मुझे अभी भी लगता है कि हमने जिस विधि को कवर किया है वह एक अच्छी है क्योंकि यह ज्यादातर मामलों में चिकनी तरंगें पैदा करती है, और जब तक हम इसे सही नहीं कर लेते, तब तक हम विभिन्न मूल्यों के साथ खेलकर खराब परिणामों से आसानी से बच सकते हैं।
ऊपर लपेटकर
मुझे उम्मीद है कि इस लेख के बाद, आप एक लहराती आकृति या पैटर्न बनाने के लिए परीक्षण और त्रुटि के साथ खिलवाड़ नहीं करेंगे। इसके साथ ही ऑनलाइन जनरेटर के लिए, किसी भी प्रकार की लहर बनाने के पीछे आपके पास गणित के सारे रहस्य हैं!
लेख यहाँ समाप्त होता है लेकिन अब आपके पास लहराती आकृतियों का उपयोग करने वाले फैंसी डिज़ाइन बनाने के लिए एक शक्तिशाली उपकरण है। आपको आरंभ करने के लिए यहां प्रेरणा है …
आप क्या कहते हैं? मेरे ऑनलाइन जनरेटर का उपयोग करें (या यदि आप पहले से ही सभी गणित को दिल से सीख चुके हैं तो मैन्युअल रूप से कोड लिखें) और मुझे अपनी रचनाएं दिखाएं! आइए टिप्पणी अनुभाग में एक अच्छा संग्रह रखें।
