Borders and shadows w3-border, w3-shadow In Hindi
किसी यूजर डिफाइन एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन में W3.CSS, वेबपेज वेबसाइट कंपोनेंट्स ऑब्जेक्ट एलिमेंट्स को विसुअली इम्प्रूव या कमर्शियल प्रीव्यू करने के लिए बॉर्डर और शैडो W3.CSS स्टाइलिंग फीचर्स इम्पोर्टेन्ट कांसेप्ट हैं। बॉर्डर और शैडो W3.CSS फ्रेमवर्क किसी वेबपेज एलिमेंट कॉम्पोनेन्ट ऑब्जेक्ट पर बॉर्डर और शैडो को इजीली इम्प्लीमेंट करने के लिए आसान यूटिलिटी क्लास प्रोवाइड करते है. जिससे वेब डेवलपर्स कस्टम CSS वेब कोड लिखे बिना अपने वेबपेज में एक कस्टम स्टाइलिंग इफ़ेक्ट को अप्लाई कर सकते हैं।
Let’s take a closer look at how to use borders and shadows in W3.CSS.
Borders class concept in W3.CSS.
यूजर क्रिएटेड एचटीएमएल, जावास्क्रिप्ट, वेबपेज कॉम्पोनेन्ट एलिमेंट पर बॉर्डर सीसीएसएस स्टाइलिंग ऐट्रिब्यूट्स का यूज़ वेब एलिमेंट्स के चारों ओर एक विज़िबल आउटलाइन ऐड या डिस्प्ले करने में किया जाता है। W3.CSS सीसीएसएस ऑब्जेक्ट एलिमेंट्स पर बॉर्डर इफ़ेक्ट अप्लाई करने और उन अप्लाई बॉर्डर की थिकनेस, कलर और स्टाइल को कस्टमाइज़ करने के लिए कई इम्पोर्टेन्ट क्लास प्रोवाइड करता है।
Names of common W3.CSS border classes.
- .w3-border – किसी यूजर डिफाइन एचटीएमएल, जावास्क्रिप्ट, वेबपेज एलिमेंट के सभी साइड में डिफ़ॉल्ट विड्थ, कलर और स्टाइल के साथ एक बॉर्डर को ऐड करता है।
- .w3-border-{color} – यह यूजर डिफाइन एचटीएमएल, जावास्क्रिप्ट, वेबपेज ऑब्जेक्ट एलिमेंट बॉर्डर के कलर को सेट करता है. जैसे, .w3-border-yellow, .w3-border-lime, आदि है।
- .w3-border-{size} – यह एचटीएमएल, जावास्क्रिप्ट वेब डेवलपर को मौजूदा ऑब्जेक्ट एलिमेंट बॉर्डर की विड्थ कस्टमाइज करने के फीचर्स प्रोवाइड करता है. जैसे, .w3-border-small, .w3-border-medium, .w3-border-large, आदि है.
- .w3-border-{direction} – यह एचटीएमएल, जावास्क्रिप्ट वेब एलिमेंट पे स्पेसिफिक डायरेक्शन साइड में बॉर्डर को ऐड कर डिस्प्ले करता है.
- .w3-border-top – यह एचटीएमएल, जावास्क्रिप्ट वेब एलिमेंट के टॉप डायरेक्शन साइड में बॉर्डर को ऐड कर डिस्प्ले करता है.
- .w3-border-right – यह एचटीएमएल, जावास्क्रिप्ट वेब एलिमेंट के राइट साइड में बॉर्डर को ऐड कर डिस्प्ले करता है.
- .w3-border-bottom – यह एचटीएमएल, जावास्क्रिप्ट वेब एलिमेंट के बॉटम पे बॉर्डर को ऐड कर डिस्प्ले करता है.
- .w3-border-left – यह एचटीएमएल, जावास्क्रिप्ट वेब एलिमेंट के लेफ्ट डायरेक्शन में बॉर्डर को ऐड कर डिस्प्ले करता है.
- .w3-border-round – यह एचटीएमएल, जावास्क्रिप्ट वेब एलिमेंट के बॉर्डर के कोनों को राउंड कर डिस्प्ले करता है. जैसे, border-radius इफ़ेक्ट को ऐड करता है.
Example of the w3-border border class in an HTML webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Let’s Explore w3-border Border Class Attributes </title>
</head>
<body>
<!– Here we display w3-border Element with border on all sides of web element–>
<div class=”w3-border w3-padding”>
<p>This paragraph tag have all side border attributes. </p>
</div>
<!– Here we display w3-border-red Element with a user define border color –>
<div class=”w3-border w3-border-red w3-padding”>
<p>This paragraph tag have red border color.</p>
</div>
<!– Here we display w3-border Element with specific border size thickness –>
<div class=”w3-border w3-border-large w3-border-teal w3-padding”>
<p>This paragraph tag have a large border with teal color attributes.</p>
</div>
<!– Here we display w3-border Element with border on the top and bottom right direction only –>
<div class=”w3-border-top w3-border-bottom w3-border-right w3-padding”>
<p>This paragraph tag have a borders display at the top and bottom direction only.</p>
</div>
<!– Here we display w3-border Element with rounded borders attributes –>
<div class=”w3-border w3-border-round w3-border-lime w3-padding”>
<p>This paragraph tag have rounded borders attributes.</p>
</div>
</body>
</html>
Explanation of w3-border border class example.
- यहाँ फर्स्ट एक्साम्प्ल में div ब्लॉक पैराग्राफ टैग के चारों तरफ एक बेसिक बॉर्डर को अप्लाई करता है।
- यहाँ सेकंड एक्साम्प्ल में div ब्लॉक पैराग्राफ टैग बॉर्डर के कलर को रेड कलर में डिस्प्ले करता है।
- यहाँ थर्ड एक्साम्प्ल में div ब्लॉक पैराग्राफ टैग बॉर्डर को लार्ज में डिस्प्ले करता है।
- यहाँ फोर्थ एक्साम्प्ल में div ब्लॉक पैराग्राफ टैग बॉर्डर में सिर्फ़ टॉप, बॉटम, और राइट डायरेक्शन में बॉर्डर को डिस्प्ले करता हैं।
- यहाँ फिफ्थ एक्साम्प्ल में div ब्लॉक पैराग्राफ टैग बॉर्डर को राउंड आर्डर में डिस्प्ले करता हैं. इसके लिए .w3-border-round क्लास का यूज़ किया जाता है।
w3-border border size class.
यहाँ वेब डेवलपर नीचे दी गई W3.CSS क्लास का यूज़ करके एक स्पेसिफिक बॉर्डर की थिकनेस को फिक्स कर सकते हैं.
- .w3-border-small – यह एचटीएमएल, जावास्क्रिप्ट वेब एलिमेंट ऑब्जेक्ट पर एक स्माल साइज बॉर्डर ऐट्रिब्यूट्स को अप्लाई करता है।
- .w3-border-medium – यह एचटीएमएल, जावास्क्रिप्ट वेब एलिमेंट ऑब्जेक्ट पर मीडियम साइज बॉर्डर साइज़ (डिफ़ॉल्ट) को अप्लाई करता है।
- .w3-border-large – यह एचटीएमएल, जावास्क्रिप्ट वेब एलिमेंट ऑब्जेक्ट पर लार्ज साइज बॉर्डर इफ़ेक्ट को अप्लाई करता है।
Shadow Class Concept in W3.CSS.
एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन ऑब्जेक्ट एलिमेंट में शैडो इफ़ेक्ट ऐट्रिब्यूट्स का यूज़ ज्यादातर वेबपेज एलिमेंट के लिए डेप्थ में शैडो अप्लाई करने में किया जाता है। W3.CSS वेब डेवलपर को मल्टीप्ल इंटेंसिटी और टाइप के शैडो इफ़ेक्ट ऐट्रिब्यूट्स को ऐड करने के लिए कई क्लास प्रोवाइड करता है।
Basic Shadow Class Attributes Names.
- .w3-shadow – यह एचटीएमएल, जावास्क्रिप्ट वेब एलिमेंट ऑब्जेक्ट पर एक लाइटवेट शैडो इफ़ेक्ट को ऐड करता है. जो एक लिफ़्टेड इफ़ेक्ट की तरह डिस्प्ले होता है।
- .w3-shadow-small – यह एचटीएमएल, जावास्क्रिप्ट वेब एलिमेंट ऑब्जेक्ट पर एक स्माल शैडो ऐट्रिब्यूट्स को ऐड करता है।
- .w3-shadow-medium – यह एचटीएमएल, जावास्क्रिप्ट वेब एलिमेंट ऑब्जेक्ट पर एक मीडियम साइज़ शैडो इफ़ेक्ट को अप्लाई करता है।
- .w3-shadow-large – यह एचटीएमएल, जावास्क्रिप्ट वेब एलिमेंट ऑब्जेक्ट पर एक लार्ज शैडो इफ़ेक्ट को ऐड करता है।
- .w3-shadow-none – यह एचटीएमएल, जावास्क्रिप्ट वेब एलिमेंट ऑब्जेक्ट पर कोई भी शैडो डिस्प्ले नहीं करता है।
- .w3-shadow-hover – यह एचटीएमएल, जावास्क्रिप्ट वेब एलिमेंट ऑब्जेक्ट पर होवर करने पर एक शैडो को डिस्प्ले करता है. जब वेब डेवलपर मैन्युअली उस पर माउस कर्सर एलिमेंट को मूव करता है।
Example of the w3-shadow shadow class in an HTML webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Let’s Explore w3-shadow Attributes Example</title>
</head>
<body>
<!– Here we display w3-shadow Element with a basic shadow attributes –>
<div class=”w3-shadow w3-padding”>
<p>This paragraph tag have a basic shadow attributes.</p>
</div>
<!– Here we display w3-shadow Element with a small shadow effect –>
<div class=”w3-shadow-small w3-padding”>
<p>This paragraph tag have small shadow effect.</p>
</div>
<!– Here we display w3-shadow Element with a medium shadow effect –>
<div class=”w3-shadow-medium w3-padding”>
<p>This paragraph tag have a medium shadow effect.</p>
</div>
<!– Here we display w3-shadow Element with a large shadow effect –>
<div class=”w3-shadow-large w3-padding”>
<p>This paragraph tag have large shadow effect.</p>
</div>
<!– Here we display w3-shadow Element with no shadow effect –>
<div class=”w3-shadow-none w3-padding”>
<p>This paragraph tag have no shadow effect.</p>
</div>
<!– Here we display w3-shadow Element with a shadow on hover effect –>
<div class=”w3-shadow-hover w3-padding”>
<p>This paragraph tag will display a shadow on hover effect.</p>
</div>
</body>
</html>
Explanation of w3-shadow shadow class example.
- यहाँ फर्स्ट एक्साम्प्ल में div ब्लॉक पैराग्राफ टैग में एक बेसिक शैडो प्रीव्यू है।
- यहाँ सेकंड एक्साम्प्ल में div ब्लॉक पैराग्राफ टैग में एक स्माल शैडो डिस्प्ले है।
- यहाँ थर्ड एक्साम्प्ल में div ब्लॉक पैराग्राफ टैग में एक मीडियम शैडो प्रीव्यू है।
- यहाँ फोर्थ एक्साम्प्ल में div ब्लॉक पैराग्राफ टैग में एक लार्ज शैडो डिस्प्ले है।
- यहाँ फिफ्थ एक्साम्प्ल में div ब्लॉक में .w3-shadow-none क्लास का यूज़ करके कोई शैडो नहीं डिस्प्लै है।
- यहाँ सिक्स एक्साम्प्ल में div ब्लॉक में होवर इफ़ेक्ट अप्लाई है, जब वेब यूज़र उस ऑब्जेक्ट एलिमेंट पर होवर करता है, तो शैडो डिस्प्ले होता है।
Grouping and displaying borders and shadows in W3.CSS.
वेब डेवलपर एचटीएमएल, जावास्क्रिप्ट वेबपेज पर एक ही एलिमेंट पर बॉर्डर और शैडो दोनों इफ़ेक्ट ऐट्रिब्यूट्स को इजीली मर्ज या कम्बाइंड कर एक इफेक्टिव कमर्शियल वेबपेज डिज़ाइन ऑब्जेक्ट क्रिएट कर सकते हैं।
Example of the w3-border border and w3-shadow shadow attribute groups in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Lets Merge Border and Shadow Class w3-border and w3-shadow attributes </title>
</head>
<body>
<!– Here we display w3-border and w3-shadow Element with Border and Shadow attributes–>
<div class=”w3-border w3-shadow-large w3-padding”>
<p>This paragraph tag have a both a border and large shadow attributes.</p>
</div>
<!– Here we display w3-border and w3-shadow Element with Border, Rounded Corners, with Shadow attributes–>
<div class=”w3-border-round w3-border w3-shadow-small w3-padding”>
<p>This paragraph tag have a rounded border with a medium shadow.</p>
</div>
</body>
</html>
Explanation of w3-border and w3-shadow merge class example.
- यहाँ फर्स्ट एक्साम्प्ल में div ब्लॉक पैराग्राफ टैग में बॉर्डर और लार्ज शैडो दोनों प्रीव्यू हैं।
- यहाँ सेकंड एक्साम्प्ल में div ब्लॉक पैराग्राफ टैग में राउंड कार्नर, बॉर्डर, और स्माल शैडो ऐट्रिब्यूट्स डिस्प्ले हैं.
