सीएसएस रंग ट्यूटोरियल

जब आपके UI को विशिष्ट बनाने की बात आती है, तो सही रंग पैलेट चुनने जैसा कुछ नहीं होता है। इस ट्यूटोरियल के साथ आप सीखेंगे कि जब आप अपना UI बनाते हैं तो तत्वों, फ़ॉन्ट्स और बहुत कुछ के लिए रंग असाइन करना कितना आसान होता है।

रंग जोड़ने के लिए, CSS में color होता है डेटा प्रकार, जो मानक लाल, हरे, नीले (RGB) प्रारूप में रंग का प्रतिनिधित्व करता है।

रंग सिंटैक्स

सीएसएस के साथ रंगों को परिभाषित करने के कुछ तरीके हैं:

कीवर्ड के साथ। उन्हें स्ट्रिंग के रूप में टाइप किया जाता है, जैसे 'लाल', 'सफेद', 'पीला' या #fff जैसे हेक्स नंबर।
हेक्साडेसिमल नोटेशन के साथ, उदाहरण के लिए #fff।
के माध्यम सेrgb() या rgba() कार्यात्मक संकेतन।
या एचएसएल फ़ंक्शंस जैसे hsl() . का उपयोग करना और hsla() ।

कीवर्ड पहचानकर्ता का उपयोग करना

किसी भी तत्व में रंग जोड़ने का सबसे आसान तरीका है, कीवर्ड विशेषताओं का उपयोग करना।

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

<button class="color">Color Me</button>

हमारे बटन तत्व के साथ रंग जोड़ने के लिए हमारे पास दो विकल्प हैं। या तो background-color . के माध्यम से संपत्ति या color संपत्ति। इस मामले में रंग संपत्ति पाठ का रंग और पृष्ठभूमि-रंग, पृष्ठभूमि का रंग बदलती है। चलिए आगे बढ़ते हैं और हमारे बटन का चयन करते हैं और फिर हमारे बटन में रंग जोड़ते हैं!

आसान सही?

आरजीबीए () और hsl() फ़ंक्शन

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

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

ये कीवर्ड रंग, या बहुत अधिक कोई अन्य रंग, हेक्स आरजीबी या आरजीबी दशमलव के रूप में भी व्यक्त किया जा सकता है। उदाहरण के लिए 'ब्लैक' दशमलव में #000000 या 0,0,0 होगा और इसी तरह। आप इन हेक्स या दशमलव विकल्पों के साथ अधिक विशिष्ट रंग प्राप्त कर सकते हैं।

RGB दशमलव जोड़ने का एक आसान तरीका rgb() . का उपयोग करना होगा समारोह। प्रत्येक दशमलव का अधिकतम मान 255 है। आइए इन दो नए विकल्पों को दिखाने के लिए अपने कीवर्ड रंग बदलें:

button.color {
    /* RGB and decimal */
    color: #fff;
    background-color: rgb(210,105,30);
}

क्या आपने देखा है कि काले रंग में वही वर्ण दोहराए जाते हैं? जब यह वही चरित्र है तो आप पहले तीन टाइप कर सकते हैं जैसे मैंने ऊपर सफेद के लिए किया था। इसे #ffffff के रूप में भी व्यक्त किया जा सकता है।

रंग जोड़ने का एक अन्य विकल्प hsl() . का उपयोग करना होगा समारोह। HSL का मतलब रंग, संतृप्ति और हल्कापन है। हल्कापन सफेद (100%) से काला (0%) तक प्रतिशत का प्रतिनिधित्व करता है। संतृप्ति भी एक प्रतिशत है लेकिन ग्रे रंग का है जहां 100% 'पूर्ण' ग्रे रंग है। ह्यू रंग चक्र में डिग्री (0 से 360) को आरजीबी के रूप में दर्शाता है जहां 0 लाल है, 120 हरा है और 240 नीला है। मुझे पता है कि यह जटिल लगता है 😅।

विजुअल स्टूडियो जैसे कोड संपादक एक रंग पिकर प्रदान करते हैं जिसे आप खेल सकते हैं। आगे बढ़ें और टाइप करें hsl() फिर होवर करें और रंग पिकर पॉप अप देखें।

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

रंग अस्पष्टता संशोधित करना

आप देख सकते हैं कि rgb और hsl दोनों प्रकार्यों को rgba() द्वारा व्यक्त किया जा सकता है या hsla() . 'ए' अल्फा के लिए खड़ा है लेकिन पारदर्शिता / अस्पष्टता काफी अधिक है जहां 0 पारदर्शी है और 1 पूरी तरह से अपारदर्शी है।

अपारदर्शिता को संशोधित करके आप अपने रंगों के साथ और भी अधिक परिष्कृत हो सकते हैं। आइए हमारे बटन के रंग को उसकी अस्पष्टता को संशोधित करके पूरा करें:

button.color {
    color: #fff;
    background-color: rgba(210,105,30, 0.7);
}

अस्पष्टता के साथ हमारा पाठ वास्तव में बहुत बेहतर पढ़ता है!