Before and After Pseudo Selectors (CSS)Free web Tutorials #33
Before and After Pseudo Selectors (CSS)
पिछले ट्यूटोरियल में, हमने सीखा कि हमारे सीएसएस में विभिन्न छद्म चयनकर्ताओं का उपयोग कैसे किया जाता है। यहां, हम एक विशेष प्रकार के चयनकर्ता देखेंगे जिन्हें छद्म चयनकर्ताओं से पहले और बाद में जाना जाता है। tut33.html और तत्काल बॉयलरप्लेट नामक एक नई फ़ाइल बनाकर प्रारंभ करें। फिर आप <शीर्षक> टैग के तहत छद्म चयनकर्ताओं के पहले और बाद में शीर्षक दे सकते हैं।
मूल HTML कोड को इस प्रकार लिखकर प्रारंभ करें-
<body>
<header>
<nav class="navbar">
<ul class="navigation">
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Services</li>
<li class="item">Contact Us</li>
</ul>
</nav>
</header>
<section>
<h1> Welcome to Coding World</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident error ratione doloribus sed dolorum,
ipsum cumque reprehenderit dignissimos architecto veniam optio sint aliquam consectetur corrupti vero
similique velit. Possimus eum consequatur delectus quia magni.</p>
</section>
</body>
उपरोक्त कोड को चलाकर, हमें एक वेबसाइट का एक बहुत ही सरल आउटलेट मिलेगा जैसा कि नीचे दिखाया गया है-
फिर हम वेबसाइट के बॉडी टैग में कुछ स्टाइल जोड़ेंगे-
body {
margin: 0;
padding: 0;
background-color: black;
color: white;
}
सामग्री को एक पंक्ति में प्रदर्शित करने के लिए, हम प्रदर्शन गुण को फ्लेक्स के रूप में सेट करके प्रयास कर सकते हैं।
.navigation {
font-family: 'Bree Serif', serif;
font-size: 20px;
display: flex;
}
फिर हम अपनी सूची वस्तुओं को स्टाइल कर सकते हैं और इसमें कुछ पैडिंग जोड़ सकते हैं-
li {
list-style: none;
padding: 20px 23px;
}
आइए अब चर्चा करते हैं कि छद्म चयनकर्ताओं के पहले और बाद में क्या हैं। किसी तत्व की सामग्री से पहले कुछ सामग्री डालने के लिए छद्म तत्व से पहले :: का उपयोग किया जा सकता है। :: के बाद छद्म तत्व का उपयोग किसी तत्व की सामग्री के बाद कुछ सामग्री डालने के लिए किया जा सकता है।
हम फ्लेक्सबॉक्स प्रॉपर्टी की मदद से अपने एचटीएमएल में सेक्शन टैग को स्टाइल कर सकते हैं और कुछ अन्य बदलाव भी इस प्रकार कर सकते हैं-
section {
height: 344px;
font-family: 'Bree Serif', serif;
margin: 3px 230px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
फिर हेडिंग के फॉण्ट साइज को 4 रिम्स बढ़ा दें और पैराग्राफ के कंटेंट को बीच में इस तरह लें-
h1 {
font-size: 4rem;
}
p {
text-align: center;
}
तो हमारा पेज इस प्रकार दिखेगा-
हम Google Fonts से भी अपनी पसंद के Fonts को Select कर सकते हैं। अब बैकग्राउंड इमेज को वेबसाइट पर रखें। आप Unsplash से भिन्न पृष्ठभूमि छवियों का चयन कर सकते हैं। आप यहां से रैंडम बैकग्राउंड इमेज जेनरेट कर पाएंगे। स्टाइल करते समय आप इमेज के URL को <body> टैग में रख सकते हैं। लेकिन हम देखेंगे कि हमारी वेबसाइट पर उत्पन्न छवि पूरे पृष्ठ को कवर करती है और पाठ को पढ़ने में मुश्किल बनाती है।
इस समस्या को समायोजित करने के लिए, हम शीर्षलेख से पहले सामग्री जोड़ सकते हैं। उस सामग्री में, हम एक पृष्ठभूमि छवि जोड़ सकते हैं, इसकी स्थिति को पूर्ण बना सकते हैं, और इसकी चौड़ाई और ऊंचाई को निम्नानुसार सेट कर सकते हैं-
header::before{
background: url('https://source.unsplash.com/collection/190727/1600x900') no-repeat center center/cover;
content: "";
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.3;
}
यहां उपयोग की जाने वाली z-index प्रॉपर्टी पृष्ठभूमि छवि के ऊपर सामग्री को प्रदर्शित करने के लिए है। हम इसकी अस्पष्टता को बदलकर छवि को हल्का बना सकते हैं। तो हमारी अंतिम वेबसाइट इस प्रकार दिखेगी-
इस ट्यूटोरियल में, हमने सीखा कि कैसे छद्म चयनकर्ताओं से पहले और बाद में, हम पृष्ठभूमि छवि की अस्पष्टता को बदल सकते हैं। विभिन्न तकनीकों के बारे में अधिक जानने के लिए, ट्यूटोरियल के साथ बने रहें।
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Before and after pseudo selector</title>
<link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
background-color: black;
color: white;
}
header::before{
background: url('https://source.unsplash.com/collection/190727/1600x900') no-repeat center center/cover;
content: "";
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.3;
}
.navigation {
font-family: 'Bree Serif', serif;
font-size: 20px;
display: flex;
}
li {
list-style: none;
padding: 20px 23px;
}
section {
height: 344px;
font-family: 'Bree Serif', serif;
margin: 3px 230px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-size: 4rem;
}
p {
text-align: center;
}
/* section::after{
content:"this is a content"
} */
</style>
</head>
<body>
<header>
<nav class="navbar">
<ul class="navigation">
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Services</li>
<li class="item">Contact Us</li>
</ul>
</nav>
</header>
<section>
<h1> Welcome to Coding World</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident error ratione doloribus sed dolorum,
ipsum cumque reprehenderit dignissimos architecto veniam optio sint aliquam consectetur corrupti vero
similique velit. Possimus eum consequatur delectus quia magni.</p>
</section>
</body>
</html>
Free web Tutorials #33){kind=link}