💩 👨🏼‍🏭 🤚 ग्रेडिएंट के बारे में कुछ शब्द 💃🏿 🐹 🚜

सभी को नमस्कार! आज मैं ग्रेडिएंट्स, लोकप्रिय साइटों के बारे में थोड़ी बात करना चाहता हूं जो उपयोगकर्ताओं को चयन करने और / या उत्पन्न करने की क्षमता प्रदान करते हैं, साथ ही कुछ ग्रेडिएंट भी हैं जो मुझे पसंद हैं और विभिन्न परियोजनाओं पर लागू होते हैं। शायद आप में से कुछ लोग भी उन्हें पसंद करेंगे।

आज, कुछ लोग नहीं जानते कि ग्रेडिएंट्स क्या हैं और उन्हें विकास में कैसे लागू किया जाए। यदि आप लेखों पर विश्वास करते हैं, तो 2018 में, उज्ज्वल और संतृप्त ग्रेडिएंट का उपयोग एक निश्चित प्रवृत्ति है।

एक ढाल क्या है?

आइए, शो के लिए, याद रखें कि एक ढाल क्या है।

ग्रेडिएंट (लेट से। ग्रैडिएंस, जीनस केस ग्रेडिएंटिस - वॉकिंग, ग्रोइंग) - एक वेक्टर जो एक निश्चित मात्रा की सबसे बड़ी वृद्धि की दिशा में संकेत करता है {\ displaystyle \ varphi} \ varphi, जिसका मान अंतरिक्ष में एक बिंदु से दूसरे (स्केलर फ़ील्ड) में भिन्न होता है, और इस दिशा में इस मात्रा की वृद्धि दर के बराबर परिमाण (मापांक) में

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

सीएसएस ढाल फार्म

आइए एक त्वरित नज़र डालें कि क्लासिक ढाल किस चीज से बना है।

एक ढाल को दो तरह से लिखा जा सकता है:

पृष्ठभूमि: रैखिक-ढाल (36deg, # 0dd3ff, # 0389ff, # 1c79c0);
पृष्ठभूमि-छवि: रैखिक-ढाल (36deg, # 0dd3ff, # 0389ff, # 1c79c0);

उपयोग करने के लिए रिकॉर्डिंग का कौन सा रूप आपके ऊपर है।

उपरोक्त कोड में, हमने पृष्ठभूमि गुणों के लिए तीन मान निर्दिष्ट किए हैं:

1. ग्रेडिएंट क्या होगा - रैखिक-ग्रेडिएंट - इस मामले में यह रैखिक है। भविष्य में, लेख में हम उसके बारे में विशेष रूप से बात करेंगे।
2. ढाल रेखा के झुकाव के कोण का संकेत दिया, जो ढाल की दिशा को दर्शाता है। दिशा को इंगित करने के दो तरीके हैं: [<कोण> | से <स्थिति>] , जहां कोण को नीचे से मापा जाता है, अर्थात् , एक डिग्री, या दूसरे तरीके से, और से स्थिति का संकेत करके। उदाहरण के लिए, ऊपर से दाएं , बाएं से नीचे , आदि।
रंग मान # ****** है जिसके साथ ढाल शुरू और समाप्त होगा।

सभी मान कॉमा से अलग हो जाते हैं, और रंगों की संख्या दो से अनंत तक बिल्कुल कुछ भी हो सकती है। लेकिन, ज़ाहिर है, कारण के भीतर।

रंग ढालने वाले लिखना

ढाल का रंग उपलब्ध किसी भी पदनाम के साथ लिखा जा सकता है:

हेक्स कलर कोड - # 000000 या संक्षिप्त नाम # 000;
आरजीबी कलर कोड - आरजीबी (0, 0, 0);
रंग का नाम - काला;
एचएसएल रंग कोड - एचएसएल (0, 0%, 0%);

आप रंग के बाद % जोड़कर रंगों को प्रतिशत के रूप में भी निर्दिष्ट कर सकते हैं। उदाहरण के लिए, आरजीबी (0, 0, 0) 0%, आरजीबी (255,255,255) 100% ।

वेब विकास में ग्रेडिएंट लागू करने के लिए आवश्यक सभी बुनियादी ज्ञान है। लेकिन निश्चित रूप से हर कोई नहीं जानता कि ग्रेडिएंट का उपयोग अन्य मामलों में किया जा सकता है। उनके बारे में नीचे।

छवि स्नातक

अन्य पृष्ठभूमि गुणों का उपयोग चित्र के साथ एक संयुक्त ढाल को पृष्ठभूमि के रूप में रिकॉर्ड करने के लिए किया जा सकता है। आइए दो उदाहरण देखें:

उदाहरण # 1
उदाहरण # 2

पहले उदाहरण में, हमने एक ढाल पृष्ठभूमि (उदाहरण 1) बनाई, और दूसरे में हमने एक छवि जोड़ी और इसके लिए अपनी ढाल लागू की (उदाहरण 2)।

पाठ के लिए ढाल।

कभी-कभी आप लिंक या शीर्षक के पाठ को अधिक उज्ज्वल, ध्यान देने योग्य और / या सादे पाठ को किसी तरह के चित्र के साथ बदलना चाहते हैं। CSS हमें निम्न गुणों का उपयोग करने की अनुमति देता है:

मिश्रण मिश्रण मोड
-webkit- पाठ-भरण-रंग -webkit- पृष्ठभूमि-क्लिप के साथ संयुक्त

उदाहरण:

मिश्रण मिश्रण मोड
पृष्ठभूमि क्लिप

छवि के लिंक के साथ ग्रेडिएंट को बदलकर इसी तरह की क्रियाएं की जा सकती हैं।

याद रखने वाली मुख्य बात यह है कि कुछ गुण ब्राउज़रों के सभी संस्करणों द्वारा समर्थित नहीं हैं। क्या मैं उपयोग कर सकता हूं पर संगतता की जांच करें

बैकग्राउंड ब्लेंड मोड में सीएसएस ग्रैडिएटर्स का संयोजन

हाल ही में, तीन और नए सीएसएस गुण प्रकट हुए हैं जिन्हें आधुनिक ब्राउज़रों में बहुत अच्छा समर्थन मिला है। इन गुणों में शामिल हैं:

बैकग्राउंड इमेजेस, ग्रेडिएंट्स और बैकग्राउंड कलर्स को मिक्स करने के लिए बैकग्राउंड- मिक्स -मोड
मिक्स-मिक्स-मोड , अन्य तत्वों पर तत्वों को मिलाने के लिए और अंत में
अलगाव , एक कम इस्तेमाल की जाने वाली संपत्ति, तत्वों को मिलाने के लिए मिक्स-ब्लेंड मोड में उपयोग किया जाता है।

पहले के बारे में थोड़ी बात करते हैं।

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

वर्णक्रमीय पृष्ठभूमि

हम तीन ग्रेडर लागू करते हैं जो कि लगभग पूर्ण रंग स्पेक्ट्रम के साथ एक पृष्ठभूमि बनाते हैं जो मॉनिटर पर प्रदर्शित किया जा सकता है।

.spectrum-background {
background:
linear-gradient(red, transparent),
linear-gradient(to top left, lime, transparent),
linear-gradient(to top right, blue, transparent);
background-blend-mode: screen;
}

और अब हमारे पास एक बहुरंगी पृष्ठभूमि है। ऐसा प्रभाव पैदा करना पहले केवल एक छवि के साथ संभव था जिसका वजन दस किलो किलोबाइट होगा। लेकिन हमने सीएसएस के माध्यम से इस प्रभाव को 200 बाइट्स से कम करके पुन: प्रस्तुत किया, न कि HTTP अनुरोध को सहेजने का।

प्लेड सीएसएस बनाएं

हम पृष्ठभूमि-मिश्रण-मोड का उपयोग करके ग्रेडिएंट के साथ दिलचस्प पैटर्न भी बना सकते हैं।

.plaid-background {
background:
repeating-linear-gradient(
-45deg,
transparent 0,
transparent 25%,
dodgerblue 0,
dodgerblue 50%
),
repeating-linear-gradient(
45deg,
transparent 0,
transparent 25%,
tomato 0,
tomato 50%
),
repeating-linear-gradient(
transparent 0,
transparent 25%,
gold 0,
gold 50%
), white;
background-blend-mode: multiply;
background-size: 100px 100px;
}

अंत में, यह वही है जो हमें मिला,

मंडलियों के साथ वेबसाइट पृष्ठभूमि

कैसे एक और के बारे में, इस बार एक रेडियल ढाल के साथ:

.circles-background {
background:
radial-gradient(
khaki 40px,
transparent 0,
transparent 100%
),
radial-gradient(
skyblue 40px,
transparent 0,
transparent 100%
),
radial-gradient(
pink 40px,
transparent 0,
transparent 100%
), snow;
background-blend-mode: multiply;
background-size: 100px 100px;
background-position: 0 0, 33px 33px, -33px -33px;
}

परिणाम सभी अपेक्षाओं से अधिक है।

रात्रि दृष्टि प्रभाव

आइए अब CSS सम्मिश्रण मोड के साथ एक और प्रभाव को फिर से बनाने और एक फोटो लेने की कोशिश करें जैसे कि हम इसे नाइट विजन चश्मे के लेंस के माध्यम से देख रहे थे।

एक नियमित छवि लें

और रेडियल ग्रेडिएंट और उस ग्रेडिएंट को लागू करें जिसका उपयोग हमने प्लेड बनाने के लिए किया था - रिपीटिंग-लीनियर-ग्रेडिएंट

.night-vision-effect {
background:
url(https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg),
radial-gradient(
rgba(0,255,0,.8),
black
),
repeating-linear-gradient(
transparent 0,
rgba(0,0,0,.2) 3px,
transparent 6px
);
background-blend-mode: overlay;
background-size: cover;
}

और यहाँ परिणाम है ।

ग्रेडिएंट जेनरेटर साइटें

नीचे मैं उन साइटों का चयन दूंगा जो आपको बहुत ग्रेडिएंट उत्पन्न करने की अनुमति देते हैं, उनसे कैनवास, पीएनजी और एसवीजी प्रारूप बनाते हैं और अपनी परियोजनाओं में स्थापना के लिए कोड की प्रतिलिपि बनाते हैं।

और अंत में, मैं आपके साथ मेरे ग्रेडिएंट्स के चयन को साझा करना चाहता हूं , जो मुझे वास्तव में पसंद है और जिसका मैं विभिन्न परियोजनाओं में और वेबसाइट विकास में उपयोग करता हूं।

गुड लक और अपने काम का आनंद लें। टिप्पणियों में अपने पसंदीदा ग्रेडिएंट लिखें।

ग्रेडिएंट के बारे में कुछ शब्द