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>

आउटपुट

CSS3 के ग्रेडिएंट का उपयोग करके दो या दो से अधिक रंगों को रैखिक स्वरूपों में व्यवस्थित करें


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

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

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

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

  1. CSS3 का उपयोग करके तत्वों का 2D परिवर्तन

    2डी ट्रांस्फ़ॉर्म का उपयोग एलिमेंट स्ट्रक्चर को ट्रांसलेट, रोटेट, स्केल और स्क्यू के रूप में फिर से बदलने के लिए किया जाता है। कुछ 2D ट्रांसफ़ॉर्म फ़ंक्शन निम्नलिखित हैं - क्रमांक मूल्य और विवरण 1 मैट्रिक्स(एन,एन,एन,एन,एन,एन) छह मानों के साथ मैट्रिक्स रूपांतरण को परिभाषित करने के लिए प्रयुक