Box Shadow and Text Shadow Free web Tutorials #34
Box Shadow and Text Shadow
अब तक इन ट्यूटोरियल्स में, हमने HTML और CSS के माध्यम से वेबसाइट की कई परियोजनाओं और डिजाइनिंग पर चर्चा की है। अब, हम Box शैडो और टेक्स्ट शैडो के बारे में जानने जा रहे हैं। हमेशा की तरह, tut34.html के रूप में एक नई फ़ाइल बनाएं और फिर मूल बॉयलरप्लेट जोड़ें। <शीर्षक> टैग में बॉक्स शैडो और टेक्स्ट शैडो के रूप में शीर्षक दें।
बॉक्स-शैडो CSS गुण तत्व के फ्रेम के चारों ओर छाया प्रभाव जोड़ता है। हम अल्पविराम द्वारा अलग किए गए कई प्रभाव सेट कर सकते हैं। यह तत्व, धुंधला और फैलाव त्रिज्या, और रंग के सापेक्ष एक्स और वाई ऑफ़सेट द्वारा वर्णित है। टेक्स्ट-शैडो CSS प्रॉपर्टी टेक्स्ट में शैडो जोड़ती है। यह पाठ और इसकी किसी भी सजावट पर लागू होने वाली छाया की अल्पविराम से अलग सूची को स्वीकार करता है। यह तत्व, धुंधला त्रिज्या, और रंग से एक्स और वाई ऑफ़सेट के कुछ संयोजन द्वारा भी वर्णित किया गया है।
हम अपना HTML कोड लिखकर शुरू करेंगे। यहां हम कार्ड के रूप में कक्षा के साथ तीन डिव बनाएंगे। तो कोड इस प्रकार होगा-
<body>
<div class="container">
<div class="card" id="card-1">
<h2>This is C++ Course</h2>
<p>I have started C++ course which does not mean that we will stop this course. We will continue this course to completion. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque laudantium, doloremque enim repellat impedit autem nostrum facilis odio omnis optio voluptates beatae mollitia temporibus voluptas consequuntur harum animi totam molestiae labore architecto ratione qui!</p>
</div>
<div class="card" id="card-2">
<h2>This is HTML Course</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis placeat doloribus molestiae velit ipsum, aliquam officia ratione excepturi in officiis, incidunt quo est pariatur tempore ex, distinctio nostrum! Sint non doloribus rem obcaecati sunt.</p>
</div>
<div class="card" id="card-3">
<h2>Card3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In tenetur molestiae, placeat quas perferendis quibusdam atque omnis distinctio obcaecati dolor, tempora unde deserunt iure nam. Iste labore eveniet esse deserunt?</p>
</div>
</div>
</body>
फिर हम क्लास- कार्ड में मार्जिन, पैडिंग और बैकग्राउंड इमेज को इस प्रकार जोड़ेंगे-
.card{
padding: 23px 12px;
margin: 23px 12px;
background-color: burlywood;
}
हमारा पेज इस प्रकार दिखेगा-
आइए अब समझते हैं कि CSS में box-shadow effect कैसे लागू किया जाता है। मूल वाक्य रचना इस प्रकार है-
box-shadow: 10px 13px green;
अब वेबपेज के अंदर के बॉक्स इस प्रकार दिखाई देंगे-
यदि हम उपरोक्त मानों को ऋणात्मक में लिखते हैं, तो छाया ऊपर की ओर जाएगी। उसी तरह, हम ब्लर-त्रिज्या संपत्ति को बक्सों पर लागू कर सकते हैं। इस संपत्ति का उपयोग सीमा को धुंधला करने के लिए किया जाता है। दूसरी संपत्ति स्प्रेड-त्रिज्या है। इसका उपयोग बॉक्स के चारों ओर रंग फैलाने के लिए किया जाता है। इन सभी परिवर्तनों को बॉक्स के अंदर करने के लिए, हम इनसेट संपत्ति का उपयोग इस प्रकार कर सकते हैं-
बॉक्स-छाया: इनसेट 3px 5px हरा
box-shadow: inset 3px 5px green;
अब देखते हैं कि टेक्स्ट-शैडो का उपयोग कैसे किया जाता है। इसके लिए हम हेडिंग टैग में निम्न प्रकार से बदलाव करेंगे-
.card h2{
text-shadow: 3px 4px red;
}
इसे लिखने से आपको बदलाव इस प्रकार दिखाई देंगे-
हम यहां नकारात्मक मूल्यों का उपयोग ऊपर की ओर होने वाले परिवर्तनों को देखने के लिए भी कर सकते हैं। ब्लर-रेडियस और स्प्रेड-रेडियस जैसे सभी गुणों का भी यहां उपयोग किया जा सकता है।
तो, मेरा मानना है कि आप बॉक्स और टेक्स्ट शैडो की अवधारणाओं को समझ गए हैं। आप विभिन्न प्रभावों का प्रयास कर सकते हैं और तदनुसार परिवर्तनों का विश्लेषण कर सकते हैं। तब तक, ट्यूटोरियल से जुड़े रहें।
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>Box shadow and text shadow</title>
</head>
<style>
.container{
display: flex;
}
.card{
padding: 23px 12px;
margin: 23px 12px;
/* border: 2px solid red; */
background-color: burlywood;
/* box-shadow: offset-x offset-y color; */
/* box-shadow: offset-x offset-y blur-radius color; */
/* box-shadow: offset-x offset-y blur-radius spread-radius color; */
/* box-shadow: 10px 13px green; */
/* box-shadow: -10px -13px green; */
/* box-shadow: 7px 5px 10px green;
box-shadow: -7px -5px 10px green; */
/* box-shadow: -7px -5px 10px 34px green; */
/* box-shadow: -7px -5px 10px 34px rgba(71, 172, 172, 0.5); */
box-shadow: inset 3px 5px green;
box-shadow: 3px 5px green, 4px 6px red;
}
.card h2{
/* text-shadow: 3px 4px red; */
/* text-shadow: 3px 2px 2px white; */
text-shadow: -3px -2px 2px white;
}
</style>
<body>
<div class="container">
<div class="card" id="card-1">
<h2>This is C++ Course</h2>
<p>I have started C++ course which does not mean that we will stop this course. We will continue this course to completion. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque laudantium, doloremque enim repellat impedit autem nostrum facilis odio omnis optio voluptates beatae mollitia temporibus voluptas consequuntur harum animi totam molestiae labore architecto ratione qui!</p>
</div>
<div class="card" id="card-2">
<h2>This is HTML Course</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis placeat doloribus molestiae velit ipsum, aliquam officia ratione excepturi in officiis, incidunt quo est pariatur tempore ex, distinctio nostrum! Sint non doloribus rem obcaecati sunt.</p>
</div>
<div class="card" id="card-3">
<h2>Card3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In tenetur molestiae, placeat quas perferendis quibusdam atque omnis distinctio obcaecati dolor, tempora unde deserunt iure nam. Iste labore eveniet esse deserunt?</p>
</div>
</div>
</body>
</html>
