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

CSS3 लीनियर ग्रेडिएंट्स

<घंटा/>

लीनियर ग्रेडिएंट्स का उपयोग दो या दो से अधिक रंगों को ऊपर से नीचे जैसे रेखीय स्वरूपों में व्यवस्थित करने के लिए किया जाता है।

उदाहरण

आप CSS3 में रैखिक ग्रेडिएंट्स को लागू करने के लिए निम्नलिखित कोड को चलाने का प्रयास कर सकते हैं -

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(pink,green);
            background: -o-linear-gradient(pink,green);
            background: -moz-linear-gradient(pink,green);
            background: linear-gradient(pink,green);
         }
      </style>
   </head>
   <body>
       <div id = "grad1">
      </div>
   </body>
</html>

  1. CSS में मल्टीपल कलर स्टॉप का उपयोग करके लीनियर ग्रेडिएंट बनाना CSS में मल्टीपल कलर स्टॉप का उपयोग करके लीनियर ग्रेडिएंट बनाना

    एकाधिक रंग स्टॉप का उपयोग करके एक रैखिक ढाल बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    height: 200px;    width: 100%;

  1. CSS में कोणों का उपयोग करके रैखिक ग्रेडिएंट्स की दिशा निर्धारित करना CSS में कोणों का उपयोग करके रैखिक ग्रेडिएंट्स की दिशा निर्धारित करना

    ग्रेडिएंट की दिशा पर अधिक नियंत्रण के लिए, कोण को नीचे दिए गए सिंटैक्स के अनुसार परिभाषित करें - background-image: linear-gradient(angle, color-stop1, color-stop2); CSS में कोणों का उपयोग करके रैखिक ग्रेडिएंट्स की दिशा निर्धारित करने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html&

  1. CSS3 के रैखिक और रेडियल ग्रेडिएंट का उपयोग करना CSS3 के रैखिक और रेडियल ग्रेडिएंट का उपयोग करना

    ग्रेडियेंट दो या दो से अधिक रंगों के संयोजन को प्रदर्शित करता है। लीनियर ग्रेडिएंट्स का उपयोग दो या दो से अधिक रंगों को लीनियर फॉर्मेट जैसे ऊपर से नीचे तक व्यवस्थित करने के लिए किया जाता है। रेडियल ग्रेडिएंट केंद्र में दिखाई देते हैं। CSS3 में रैखिक और रेडियल ग्रेडिएंट उपयोग को दर्शाने वाला कोड निम