Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS के साथ शैडो फिल्टर

शैडो फिल्टर का उपयोग निर्दिष्ट दिशा और रंग में एक क्षीण छाया बनाने के लिए किया जाता है।

इस फिल्टर में निम्न पैरामीटर्स उपयोग किए जा सकते हैं:

पैरामीटर विवरण
Color वह रंग जो आप छाया के लिए चाहते हैं।
Direction ब्लर की दिशा, क्लॉकवाइज, 45-डिग्री इंक्रीमेंट्स में राउंडेड। डिफ़ॉल्ट मान 270 (बाएं) है।
0 = ऊपर
45 = ऊपर-दाएं
90 = दाएं
135 = नीचे-दाएं
180 = नीचे
225 = नीचे-बाएं
270 = बाएं
315 = ऊपर-बाएं

उदाहरण

शैडो फिल्टर लागू करने के लिए निम्न कोड चलाएं:

<html>
  <head>
  </head>
  <body>
    <img src="/css/images/logo.png" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
    <p>टेक्स्ट उदाहरण:</p>
    <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials</div>
  </body>
</html>

नोट: CSS फिल्टर्स (जैसे Shadow) मुख्य रूप से इंटरनेट एक्सप्लोरर के पुराने वर्जन्स के लिए थे। आधुनिक CSS में box-shadow और text-shadow प्रॉपर्टीज का उपयोग करें।

  1. CSS के साथ एलिमेंट्स पर शैडो इफेक्ट्स जोड़ें CSS के साथ एलिमेंट्स पर शैडो इफेक्ट्स जोड़ें

    एलिमेंट्स पर शैडो इफेक्ट्स जोड़ने के लिए box-shadow प्रॉपर्टी का उपयोग करें। शैडो इफेक्ट्स जोड़ने का एक उदाहरण निम्नलिखित है: उदाहरण <html>    <head>       <style>          div {             width: 300

  1. CSS के साथ टेक्स्ट पर शैडो इफेक्ट्स जोड़ें CSS के साथ टेक्स्ट पर शैडो इफेक्ट्स जोड़ें

    टेक्स्ट पर शैडो इफेक्ट्स जोड़ने के लिए text-shadow प्रॉपर्टी का उपयोग करें। शैडो इफेक्ट्स जोड़ने का एक उदाहरण निम्नलिखित है: उदाहरण   <html> <head> <style> h1 { text-shadow: 2px 2px; } h2 { text-shadow: 2px 2px red; } h3 { text-shadow: 2px 2px 5px red; } h4 { color: white; te

  1. CSS शैडो इफेक्ट (टेक्स्ट शैडो और बॉक्स शैडो) CSS शैडो इफेक्ट (टेक्स्ट शैडो और बॉक्स शैडो)

    CSS में दो प्रकार की छाया: text-shadow टेक्स्ट के लिए, box-shadow बॉक्स/तत्व के लिए। दोनों में ऑफसेट (x, y), ब्लर रेडियस, और रंग निर्दिष्ट होते हैं। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; } h