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

CSS से मास्क इफेक्ट सेट करें

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

क्र.सं. पैरामीटर और विवरण
1 Color
वह रंग जो पारदर्शी क्षेत्र बन जाएंगे।

उदाहरण

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

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

नोट: यह लीगेसी IE फिल्टर है। आधुनिक CSS में mask-image, mask-mode, या mix-blend-mode का उपयोग करें।

  1. - CSS के साथ इनवर्ट प्रभाव सेट करें

    इनवर्ट प्रभाव वस्तु के रंगों को रंग स्पेक्ट्रम में उनके विपरीत मानों पर मैप करने के लिए उपयोग किया जाता है, यानी एक नकारात्मक छवि बनाने के लिए। इस फ़िल्टर में निम्न पैरामीटर उपयोग किया जाता है: क्र.सं पैरामीटर और विवरण 1 Invertवस्तु के रंगों को रंग स्पेक्ट्रम में उनके विपरीत मान पर मैप करता

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

    CSS के साथ पल्स प्रभाव बनाने के लिए, आप निम्न कोड आज़मा सकते हैं: उदाहरण <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px;

  1. - CSS transition-duration से होवर प्रभाव की गति सेट करें

    CSS transition-duration प्रॉपर्टी ट्रांजिशन प्रभाव के पूरा होने में लगने वाला समय निर्दिष्ट करती है। :hover स्यूडो-क्लास के साथ संयोजन करके होवर प्रभाव की गति को नियंत्रित किया जा सकता है। उदाहरण नीचे दिए गए उदाहरण में, बटन पर transition-duration: 2s सेट करके होवर प्रभाव (बैकग्राउंड रंग और बॉर्डर ब