Building unique themes using color utilities in Hindi
W3.CSS वेब डेवलपमेंट स्क्रिप्ट वेब डेवलपर को मल्टीप्ल टाइप की अलग अलग कलरफुल यूटिलिटी थीम क्लास प्रोवाइड करता है, जो एक सामान्य बोरिंग वेबपेज या वेबसाइट या एप्लिकेशन के डिफ़ॉल्ट इंटरफ़ेस लुक को अट्रैक्टिव या कमर्शियल और यूनिक थीम क्रिएट करने में आपकी हेल्प करते हैं। वेब डेवलपर इन कलर क्लास यूटिलिटी को मल्टीप्ल इंडिविजुअल HTML वेब एलिमेंट पर उनके बैकग्राउंड कलर, टेक्स्ट कलर, बॉर्डर और अन्य वेबपेज वेबसाइट के डिफ़ॉल्ट स्टाइल बिहेवियर को मैनेज करने में यूज़ कर सकते हैं। वेब डेवलपर W3.CSS कलर क्लास यूटिलिटी का यूज़ करके, अपनी वेबसाइट ब्रांडिंग या पर्सनल आवश्यकता के अनुसार से अपनी वेबसाइट का लुक अपीयरेंस को आसानी से मैन्युअल डिजायर लाइट और डार्क थीम से कस्टमाइज़ कर सकते हैं।
A key W3.CSS color utility class in W3.CSS web development.
Background Color (w3-{color}) W3.CSS Class.
यह W3.CSS यूटिलिटी वेब डेवलपर को अपने वेब एलिमेंट वेबसाइट ऑब्जेक्ट पर अलग-अलग बैकग्राउंड कलर को अप्लाई करने में हेल्प करती है। इसमें आप पहले से प्री-डिफाइन कलर नामों या उनके हेक्साडेसिमल वैल्यू का यूज़ करके इन कलर को डायरेक्ट अप्लाई कर सकते है।
Text Color (w3-text-{color}) W3.CSS Class.
यह W3.CSS टेक्स्ट कलर यूटिलिटी वेब डेवलपर को किसी वेबपेज वेबसाइट एलिमेंट के टेक्स्ट पर कलर क्लास को अप्लाई करती है. जिससे वेब डेवलपर किसी वेबपेज में आसानी से टेक्स्ट के फ़ॉन्ट कलर को मॉडिफाई कर सकते हैं।
Border and Shadow W3.CSS Class.
वेब डेवलपर मौजूदा वेबपेज पर मल्टीप्ल अलग-अलग प्रकार के बॉर्डर और शैडो कलर इफ़ेक्ट ऐड करने के लिए w3-border और w3-shadow यूटिलिटी क्लास को अप्लाई कर सकते है।
Hover Effect (w3-hover-{color}) W3.CSS Class.
वेब डेवलपर मौजूदा वेबपेज एलिमेंट पर होवर कलर इफ़ेक्ट को भी अप्लाई कर सकते हैं, जिससे इंटरनेट यूज़र इन वेब एलिमेंट के साथ इंटरैक्ट करने पर इन वेबपेज ऑब्जेक्ट का डिफ़ॉल्ट लुक मॉडिफाई हो जाता है।
Creating a Simple Light Theme in W3.CSS Web Development.
एक लाइट थीम में सामान्य रूप से डार्क टेक्स्ट के साथ लाइट बैकग्राउंड कलर का यूज़ होता है। वेब डेवलपर एक क्लियर, रीडेबल, और अट्रैक्टिव वेबपेज थीम डेवलप करने के लिए अलग-अलग कलर यूटिलिटीज़ को मर्ज कर यूज़ कर सकते हैं।
Example of creating a simple light theme in W3.CSS Web Development.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Light Theme Attributes in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<style>
body {
background-color: #f4ff12; /* Here we add light background color for the webpage */
color: #123432; /* Here we add dark text for contrast */
font-family: “times”;
font-weight: 300;
}
.w3-header {
background-color: #fabcad; /* Here we add light pink background for the webpage header */
color: #f32243; /* Here we add dark text in the header area */
font-family: “times”;
font-weight: 900;
}
.w3-button {
background-color: #ffabff; /* Here we add light pink button color for call-to-action */
color: black;
}
.w3-button:hover {
background-color: #878faf; /* Here we add lighter green on hover button effect */
}
</style>
</head>
<body>
<div class=”w3-container w3-text-white w3-header”>
<h1>Here we create a Light Theme</h1>
</div>
<div class=”w3-container”>
<p>Here we can see clear light-theme web page with W3.CSS color utilities attributes. </p>
<button class=”w3-button”>Hit Me</button>
</div>
</body>
</html>
Explanation of creating a simple light theme in W3.CSS.
- Background Color – यहाँ इस थीम के बॉडी का बैकग्राउंड कलर लाइटवेट (#f4ff12) और टेक्स्ट डार्क (123432) कलर में डिफाइन किया गया है।
- Header – इसी प्रकार मौजूदा वेबपेज के हेडर में कंट्रास्ट कलर को मेन्टेन रखने के लिए डार्क टेक्स्ट के साथ लाइट पिंक बैकग्राउंड (#fabcad) को डिफाइन किया गया है।
- Buttons – वेबपेज थीम बटन में मध्यम पिंक बैकग्राउंड (#ffabff) का यूज़ किया गया हैं, और माउस पॉइंटर को होवर करने पर लाइट ग्रीन कलर (#878faf) में चेंज हो जाता हैं।
Creating a Dark Theme in W3.CSS Web Development.
वेब डेवलपर W3.CSS बेस्ड किसी वेबसाइट या वेबपेज में डार्क थीम डेवलप करने के लिए डार्क बैकग्राउंड कलर के साथ लाइटवेट टेक्स्ट कलर थीम को यूज़ कर सकते है। किसी वेबपेज वेबसाइट में डार्क कलर थीम ज्यादातर नाईट में टेक्स्ट इनफार्मेशन को रीड करने या ओपन ह्यूमन ऑय पर होने वाले इफ़ेक्ट स्ट्रेस को कम करने के लिए अधिक यूज़ की जाती है।
Example of creating a dark theme in W3.CSS Web Development.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Dark Theme Attributes in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<style>
body {
background-color: #204c39; /* Here we add a dark green background color*/
color: #f4f4f4; /* Here we add light background text color */
font-family: “times”;
font-weight: 400;
}
.w3-header {
background-color: #18392b; /* Here we add a dark header theme color*/
color: #f4f4f4; /* here light header text color */
font-family: “bookman old style”;
font-weight: 900;
}
.w3-button {
background-color: #e51f1f; /* Here we add a dark button color */
color: white;
}
.w3-button:hover {
background-color: #4682b4; /* Here we add a lighter Gray color on hover effect*/
}
</style>
</head>
<body>
<div class=”w3-container w3-header”>
<h1>Here We Create A Dark Theme</h1>
</div>
<div class=”w3-container”>
<p>Here we can see clear Dark-theme web page with W3.CSS color utilities attributes. </p>
<button class=”w3-button”>Hit Me</button>
</div>
</body>
</html>
Explanation of creating a dark theme in W3.CSS Web Development.
- Background Color – यहाँ इस एक्साम्प्ल में वेबपेज बॉडी में डार्क ग्रीन बैकग्राउंड कलर (#204c39) और लाइट टेक्स्ट (#f4f4f4) कलर डिफाइन किया गया है।
- Header – वेबपेज थीम हेडर में डार्क ग्रीन बैकग्राउंड कलर (#18392b) और लाइटवेट (#f4f4f4) टेक्स्ट कलर डिफाइन है।
- Buttons – थीम में यूज़ बटन ऑरेंज बैकग्राउंड कलर (#ffabff) का यूज़ किया गया हैं, और इस बटन पर होवर करने पर (#878faf) लाइट ग्रीन कलर में ये चेंज हो जाता हैं ।
Creating Colorful Themes in W3.CSS Web Development.
वेब डेवलपर W3.CSS बेस्ड किसी वेबसाइट या वेबपेज में डार्क थीम या इंटरफ़ेस को ज़्यादा डार्क वाइब्रेंट कलरफुल डेवलप करने के लिए वेब डेवलपर मल्टीप्ल इंडिविजुअल अलग-अलग टाइप के W3.CSS कलर यूटिलिटीज़ को आपस में मर्ज कर एक कलरफुल थीम डिज़ाइन डेवलप कर सकते हैं। जहा एक सिंपल वेबपेज वेबसाइट में यूज़ इम्पोर्टेन्ट बटन, हेडर सेक्शन, और अन्य स्पेशल वेब एलिमेंट पर एक्सेंट थीम कलर का यूज़ करने से आप इन्हे डिस्प्ले करने में अट्रैक्टिव कमर्शियल एक्सपेरिएंस प्रोवाइड करते है।
Example of a dark colorful theme in W3.CSS Web Development.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Colorful Theme Attributes in W3.CSS </title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<style>
body {
background-color: #f9f9f9; /* Here we add a dark background color */
color: #abfafa; /* Here we add dark background text color */
font-family: “times”;
font-weight: 400;
}
.w3-header {
background-color: #393939; /* Here we add a dark grey header theme color */
color: white; /*Here we add a dark White text theme color */
font-family: “times”;
font-weight: 900;
}
.w3-button {
background-color: #314c64; /* Here we add a dark blue button color*/
color: white;
}
.w3-button:hover {
background-color: #f53f3f; /* Here we add a darker orange color on hover */
}
.w3-card {
background-color: #ff1675; /* Here we add a darker card background color */
border-radius: 20px;
}
.w3-card1 {
background-color: #ff8200; /* Here we add a darker card background color */
border-radius: 10px;
}
.w3-card h3 {
color: #dbff00; /* Here we add light lime text color */
}
</style>
</head>
<body>
<div class=”w3-container w3-header”>
<h1>Here We Create A Dark Colorful Theme </h1>
</div>
<div class=”w3-container”>
<div class=”w3-card w3-padding”>
<h3>Colorful Card Block 1</h3>
<p>Here we can see clear Dark-theme web page with W3.CSS color utilities attributes. </p>
</div><br>
<div class=”w3-container”>
<div class=”w3-card1 w3-padding”>
<h3>Colorful Card Block 2 </h3>
<p>Here we can see clear Dark-theme web page with W3.CSS color utilities attributes. </p>
</div><br>
<button class=”w3-button w3-large”>Push Me</button>
</div>
</body>
</html>
Explanation of a dark colorful theme in W3.CSS Web Development.
- Vibrant Header – यहाँ इस एक्साम्प्ल में वेबपेज थीम हेडर में बोल्ड ग्रे कलर (#393939) को यूज़ किया गया है।
- Buttons – मौजूदा थीम में यूज़ वेबपेज बटन डार्क नेवी बैकग्राउंड (#314c64) कलर का यूज़ किया गया हैं. जिस पर होवर करने पर डार्क ऑरेंज (#f53f3f) कलर डिस्प्ले होता है।
- Card Section – वेबपेज में यूज़ थीम कार्ड का बैकग्राउंड डार्क पिंक (#ff1675) पर सेट किया गया है. जो वेबपेज के बाकी वेब एलिमेंट्स के साथ एक ब्राइट कंट्रास्ट थीम बनाता है.
