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

CSS3 के रेडियल ग्रेडियेंट

<घंटा/>

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

उदाहरण

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
            background: -o-radial-gradient(red 5%, green 15%, pink 60%);
            background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
            background: radial-gradient(red 5%, green 15%, pink 60%);
         }
      </style>
   </head>
   <body>
      <div id = "grad1"></div>
   </body>
</html>

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

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

  1. CSS का उपयोग करके रेडियल ग्रेडिएंट का आकार निर्धारित करना CSS का उपयोग करके रेडियल ग्रेडिएंट का आकार निर्धारित करना

    रेडियल ग्रेडिएंट का आकार सेट करने के लिए, रेडियल-ग्रेडिएंट () फ़ंक्शन का उपयोग करें। यह फ़ंक्शन पृष्ठभूमि छवि के रूप में एक रेडियल ग्रेडिएंट सेट करता है। फ़ंक्शन में दूसरा पैरामीटर नीचे दिए गए उदाहरण के अनुसार इच्छित आकार के रूप में सेट किया जाना है - background-image: radial-gradient(40% 50px at ce

  1. CSS का उपयोग करके रेडियल ग्रेडिएंट का आकार निर्धारित करना CSS का उपयोग करके रेडियल ग्रेडिएंट का आकार निर्धारित करना

    रेडियल ग्रेडिएंट का आकार सेट करने के लिए, रेडियल-ग्रेडिएंट () फ़ंक्शन का उपयोग करें। यह फ़ंक्शन पृष्ठभूमि छवि के रूप में एक रेडियल ग्रेडिएंट सेट करता है। फ़ंक्शन में पहला पैरामीटर नीचे दिखाए गए अनुसार इच्छित आकार के रूप में सेट किया जाना है - background-image: radial-gradient(ellipse,rgb(217, 255, 0