Colors and Styles in CSS in Hindi
I am working as freelancer. I am a experienced full stack web developer. My lovely stack is MERN but I am open for new tech. I love to work with teammates for achieve goals. I love researches to find specific new things.
CSS में कई तरह के styles होते हैं, जो वेब फाइल को या वेबसाइट को दिखने में काफी अच्छा बना देते हैं।
Introduction to Colors:
किसी भी वेब फाइल में रंग जान भर देते हैं। अगर रंग सही से नहीं भरा गया है, तो उस वेबपेज के presentation का कोई मतलब नहीं है। अब तो रंग या कलर एक तरह की ब्रांडिंग करने लगे हैं, जैसे लाल colour देख कर Netflix की याद आ जाती है। रंग ही व्यक्ति के मनोदशा को प्रभावित करता है, और यह तय करेगा कि यूजर कितना ज्यादा उस पेज या platfrom पर experience करेगा। किसी विशेष जगह पर विशेष रंग लगा देने से अनायास ही लोगों का ध्यान उस तरफ जाता है, और visibility बढ़ जाती है।
Applying Colors in CSS in hindi
Css में कलर अप्लाई करने के बहुत सारे तरीके हैं। हर एक तरीके को समझना जरूरी है, परंतु ज्यादातर hex code ही प्रयोग किए जाते हैं। कलर नाम से भी कलर अप्लाई किए जा सकते हैं, परंतु इसमें एक समस्या है। एक ही रंग अलग-अलग browsers पर अलग-अलग दिखने लगते हैं। Hex code में लिखे गए कलर को ड सभी जगह एक जैसे ही रहते हैं।
CSS में colour के तरीके कुछ इस प्रकार है-
Predefined Colour names
Hexadecimal Colour Codes
RGB Values
HSL Values
The "rgba" Function
The "hsla" Function
The "transparent" keyword
Predefined Colour Names
Css में colour name दे देने से style में कलर अप्लाई हो जाती है। जैसे orange, red , yellow.
body{
background-color:red;
}
Hexadecimal Colour Codes
Computer में Binary Number System की तरह ही Hexadecimal Number System भी होता है। इसका आधार 16 होता है। उसी को आधार मानकर कोड लिखे जाते हैं। कोड लिखने के लिए यह जानना जरूरी है कि hexadecimal में number किस तरह define होते हैं। इसमें 1 से 15 तक गिनती होती है। जिसमें 9 तक number होते हैं और 10 से character होते हैं-
A=10,
B=11,
C=13,
D=14,
E=15,
F=16
कलर कोड के पहले # साइन लगाया जाता है। कुछ कलर कोडः #808080, #ffcca1, #ccddee.
body{
background-color:#ccddee;
}
RGB Values
RGB primary colour कहलाते हैं। सभी रंग इन्हीं तीन को मिलाकर बनाये गये हैं। Red, Green and Blue यही rgb के रंग हैं। इन तीनों के लिए अलग-अलग values कोड में दी जाती हैं, जो 0 से 255 तक होती हैं।
body{
background-color:rgb(255,23,2);
}
HSL Values
Hsl का मतलब है Hue, Saturation and Lightness। Hue एक कलर degree है जो 0 डिग्री से 360 डिग्री तक कलर Wheel पर होती है। 0 डिग्री यानी लाल रंग। 120 डिग्री यानी हरा रंग और 240 डिग्री पर नीला रंग होता है। Saturation और Lightness को % में व्यक्त किया जाता है। Saturation मतलब colour intensity से है। Lightness उस रंग की lighting effet को दिखाता है, जिसका मतलब वह कलर कितना चमकदार दिखेगा। जैसे red colour के लिए Hsl code hsl(0, 100%, 50%) है।
body{
background-color:hsl(0, 100%, 50%);
}
The "rgba" Function
यह pattern rgb colour code की तरह ही है, बस इसमें alpha यानी transparency को दिखाने के लिए होता है। यह 0.0 से 1.0 के बीच काम करता है। 0.0 मतलब पूरी तरह transparent होना है। जैसे
body{
background-color:rgba(244,23,23,0.2);
}
The "hsla" Function
यह भी Alpha value पर कार्य करता है। जिसकी transparency 0.0 से 0.1 तक होती है।
body{
background-color:hsla(60,80%,50%,0.2);
}
The "transparent" keyword
transparent कीवर्ड पूरे रंग को transparent बना देता है। इसका इस्तेमाल पीछे के कंटेंट दिखाने के लिए होता है।
div{
background-color:transparent;
}
