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

CSS फिल्टर्स से ग्लो इफेक्ट प्राप्त करें

ग्लो इफेक्ट ऑब्जेक्ट के चारों ओर चमक बनाने के लिए उपयोग किया जाता है। यदि यह एक पारदर्शी इमेज है, तो ग्लो इसके अपारदर्शी पिक्सेल्स के आसपास बनाई जाती है।

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

क्र.सं. पैरामीटर और विवरण
1. Color
वह रंग जो आप ग्लो के लिए चाहते हैं।
2. Strength
ग्लो की तीव्रता (1 से 255 तक)।

उदाहरण

ऑब्जेक्ट के चारों ओर ग्लो बनाने के लिए निम्न कोड चलाएं:

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

आधुनिक विकल्प: CSS3 filter: drop-shadow() या box-shadow का उपयोग करें।

  1. - CSS के साथ शेक एनिमेशन प्रभाव

    शेक एनिमेशन प्रभाव किसी तत्व के लिए ऑब्जेक्ट को ऊपर-नीचे या अगल-बगल ले जाता है। उदाहरण <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-to

  1. - CSS के साथ वॉबल एनिमेशन इफेक्ट

    CSS के साथ वॉबल एनिमेशन इफेक्ट बनाने के लिए, आप निम्नलिखित कोड आज़मा सकते हैं: उदाहरण <html>    <head>       <style>          .animated {             background-image: url(/css/images/logo.png);  

  1. - CSS के साथ टाडा एनिमेशन इफेक्ट

    CSS के साथ टाडा एनिमेशन इफेक्ट बनाने के लिए, आप निम्नलिखित कोड आज़मा सकते हैं: उदाहरण <html>    <head>       <style>          .animated {             background-image: url(/css/images/logo.png);