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

CSS से स्क्रॉल पर ग्रेडिएंट बैकग्राउंड कलर कैसे बनाएं?


CSS से स्क्रॉल पर ग्रेडिएंट बैकग्राउंड कलर बनाने के लिए, कोड निम्नानुसार है -

उदाहरण

<!DOCTYPE html> <html> <head> <style>    body {       height: 250vh;       color: white;       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       background: linear-gradient(          141deg,          #a47dff 0%,          #4e28a7 40%,          #22053d 65%,          #72a4ff 75%       );    } </style> </head> <body> <h1>Change Background Gradient on Scroll Example</h1> <p style="font-size: 30px;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, laborum minus? Vero accusantium laborum quas cum, sed obcaecati quibusdam dignissimos. </p> <h2 style="position:fixed;">Scroll to see the effect.</h2> </body> </html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -

CSS से स्क्रॉल पर ग्रेडिएंट बैकग्राउंड कलर कैसे बनाएं?

स्क्रॉल करते समय ग्रेडिएंट गहरे नीले से हल्के नीले रंग में बदलेगा -

CSS से स्क्रॉल पर ग्रेडिएंट बैकग्राउंड कलर कैसे बनाएं?


  1. CSS से स्क्रॉल पर ग्रेडिएंट बैकग्राउंड कलर कैसे बनाएं? CSS से स्क्रॉल पर ग्रेडिएंट बैकग्राउंड कलर कैसे बनाएं?

    CSS से स्क्रॉल पर ग्रेडिएंट बैकग्राउंड कलर बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <style>    body {       height: 250vh;       color: white;       font-family: "Segoe UI", Tahoma,

  1. CSS से तीर कैसे बनाएं? CSS से तीर कैसे बनाएं?

    CSS से तीर बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva

  1. CSS के साथ ऑन-स्क्रॉल फिक्स्ड नेविगेशन बार कैसे बनाएं CSS के साथ ऑन-स्क्रॉल फिक्स्ड नेविगेशन बार कैसे बनाएं

    परिचय CSS position प्रॉपर्टी को निर्दिष्ट करके, हम CSS का उपयोग करके एक फिक्स्ड नेविगेशन बार बना सकते हैं जो स्क्रॉल पर फिक्स्ड हो जाता है। पोजिशन प्रॉपर्टी सिंटैक्स selector { position: static | relative | absolute | fixed | sticky; } उदाहरण: स्टिकी नेविगेशन बार = sticky) { nav.classLi