Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> 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>

आउटपुट

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

कैसे सीएसएस के साथ स्क्रॉल पर एक ढाल पृष्ठभूमि रंग बनाने के लिए?

स्क्रॉल करते समय ग्रेडिएंट गहरे नीले से हल्के नीले रंग में शिफ्ट हो जाएगा -

कैसे सीएसएस के साथ स्क्रॉल पर एक ढाल पृष्ठभूमि रंग बनाने के लिए?


  1. कैसे सीएसएस के साथ स्क्रॉल पर एक ढाल पृष्ठभूमि रंग बनाने के लिए?

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

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

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

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

    CSS स्थिति विशेषता निर्दिष्ट करके, हम CSS का उपयोग करके एक निश्चित नेविगेशन बार बना सकते हैं। CSS में पोजिशन प्रॉपर्टी का सिंटैक्स इस प्रकार है - Selector {    position: /*value*/; } निम्नलिखित सीएसएस स्थिति संपत्ति का एक उदाहरण है। उदाहरण <!DOCTYPE html> <html> <head>