CSS फंडामेंटल: कलर्स के साथ काम करना

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

इस लेख में, हम CSS रंगों के मूल सिद्धांतों को कवर करेंगे और सीखेंगे कि HTML साइट को त्रुटिहीन दिखने वाली वेबसाइट में कैसे बदला जाए।

CSS कलर्स के साथ शुरुआत करना

CSS में रंगों का वर्णन करने का एक निश्चित तरीका है जिसे कंप्यूटर समझ सकता है। यह आम तौर पर रंग को विभिन्न घटकों में तोड़कर, वांछित रंग बनाने के लिए प्राथमिक रंगों के मिश्रित सेट की गणना करके किया जाता है। CSS में रंग का वर्णन करने के कई अलग-अलग तरीके हैं।

कीवर्ड के रूप में रंग नामों का उपयोग करना

लगभग 140 CSS रंग नाम हैं जिनका अधिकांश आधुनिक ब्राउज़र समर्थन करते हैं। यह रंग कीवर्ड के लिए लाल या सियान जितना सरल हो सकता है। हालांकि यह रंगों की एक मध्यम श्रेणी के साथ मदद करता है, आप रंगों और रंगों पर शून्य नियंत्रण वाले कुछ सेट रंगों तक सीमित हैं। यह वह जगह है जहां आपको सीएसएस रंग विकल्पों की उच्च श्रेणी में कूदने की आवश्यकता होगी।

 /*Syntax*/
color: red;
color: crimson;
color: slateblue;

आरजीबी मूल्यों का उपयोग करना

वेबसाइट या ऐप डिजाइन करते समय, रंग योजना बहुत मायने रखती है—निश्चित रूप से यह आखिरी चीज नहीं होनी चाहिए जिस पर आप विचार करते हैं। CSS में, आप RGB रंग का प्रतिनिधित्व करने के लिए तीन विधियों का उपयोग कर सकते हैं। ये हेक्साडेसिमल स्ट्रिंग नोटेशन, आरजीबी फंक्शनल नोटेशन और एचएसएल फंक्शनल नोटेशन हैं। यहां उनमें से प्रत्येक पर करीब से नज़र डालें।

हेक्साडेसिमल स्ट्रिंग नोटेशन

हेक्साडेसिमल स्ट्रिंग नोटेशन हमेशा # वर्ण से शुरू होता है। इस वर्ण के बाद, आप एक विशिष्ट रंग कोड के हेक्साडेसिमल अंकों का उपयोग करके रंग निर्दिष्ट करते हैं। स्ट्रिंग केस-संवेदी नहीं है, लेकिन लोअर केस का उपयोग करना पारंपरिक है। यहां कुछ उपयोग के मामले दिए गए हैं:

#rrggbb

यह संख्यात्मक रंग का वर्णन करने का सबसे आम तरीका है। यह लाल, हरे और नीले घटकों के साथ क्रमशः 0xrr , 0xgg और 0xbb के साथ एक पूरी तरह से अपारदर्शी रंग है।

#rrggbbaa

यह अल्फा चैनल के साथ ऊपर उल्लिखित आरजीबी मानदंडों का पालन करता है जो रंग की स्पष्टता को संभालता है। 0xaa मान जितना कम होगा, रंग उतना ही अधिक पारभासी होगा।

#आरजीबी

यदि आपके पास रंग #556677 है , तो आप इसे केवल #567 के रूप में लिख सकते हैं क्योंकि यह क्रमशः 0xrr , 0xgg और 0xbb का प्रतिनिधित्व करता है। उदाहरण के लिए, # 000 (या # 000000) काला जबकि #fff (या #ffffff) सफेद है।

#आरजीबीए

यह अस्पष्टता को नियंत्रित करने के लिए 0xaa द्वारा निर्दिष्ट अल्फा चैनल के साथ उपरोक्त मानदंडों का पालन करता है।

आरजीबी कार्यात्मक संकेतन

आरजीबी कार्यात्मक संकेतन लाल, हरे और नीले घटकों का उपयोग करके रंगों का प्रतिनिधित्व करता है। इसे आरजीबी () फ़ंक्शन का उपयोग करके परिभाषित किया गया है जो प्राथमिक लाल, हरे और नीले घटकों (और एक वैकल्पिक अल्फा चैनल) के रूप में इनपुट पैरामीटर स्वीकार करता है। लाल, हरा और नीला मान 0 से 255 (समावेशी) के बीच का पूर्णांक या 0% से 100% के बीच का प्रतिशत होना चाहिए। दूसरी ओर, अल्फा चैनल 0.0 (पूरी तरह से पारदर्शी) से 1.0 (पूरी तरह से अपारदर्शी) के मूल्यों को स्वीकार करता है। यह 0% (0.0 के समान) और 100% (1.0 के समान) से प्रतिशत मान भी स्वीकार करता है।

 /*Syntax*/
color: rgb(rr,gg,bb);
color: rgba(rr,gg,bb,a);

एचएसएल कार्यात्मक संकेतन

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

रंग मान (H) CSS में समर्थित कोण इकाई द्वारा निर्दिष्ट किया जाता है। इसमें डिग्री , रेड , ग्रेड और टर्न शामिल हैं । संतृप्ति (S) ह्यू से बने अंतिम रंग का प्रतिशत निर्दिष्ट करती है। चमक (एल) घटक ग्रे स्तर को परिभाषित करता है।

 /*Syntax*/
color: hsl(XXdeg, XX%, XX%);
color: hsl(XXturn, XX%, XX%);

HTML तत्वों में रंग लागू करना

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

ग्रंथों के लिए रंग संपत्ति

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

बक्से के लिए रंग संपत्ति

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

सीमाओं के लिए रंग संपत्ति

किसी भी HTML तत्व की सीमा हो सकती है। आप सीमा-रंग संपत्ति को सीमा-शीर्ष-रंग , सीमा-दाएं-रंग , सीमा-नीचे-रंग , और सीमा-बाएं- रंग के रूप में संबंधित पक्षों के सीमा रंग को सेट करने के लिए सेट कर सकते हैं। हालांकि, शॉर्टहैंड प्रॉपर्टी का इस्तेमाल करना अच्छा अभ्यास है।

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

रैपिंग अप: रंग और अभिगम्यता

हालांकि एक खूबसूरती से डिजाइन की गई वेबसाइट पर इस्तेमाल किए गए रंग का बहुत अधिक प्रभाव पड़ता है, आपको हमेशा यह सुनिश्चित करना चाहिए कि यह सुलभ हो। रंग के अनुचित उपयोग के परिणामस्वरूप आपकी वेबसाइट पर महत्वपूर्ण ट्रैफ़िक का नुकसान हो सकता है।

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