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

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

<घंटा/>

एकाधिक रंग स्टॉप का उपयोग करके एक रैखिक ढाल बनाने के लिए, कोड इस प्रकार है -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   height: 200px;
   width: 100%;
   display: inline-block;
   margin-right: 10px;
}
.linearGradient {
   background-image: linear-gradient(to left, orange, blue,green,pink,yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient direction using multiple color stops</h1>
<div class="linearGradient"></div>
</body>
</html>

आउटपुट

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

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


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

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

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

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

  1. CSS का उपयोग करके लोकेशन कलर स्टॉप सेट करना

    रंग स्टॉप पर स्थान को प्रतिशत या पूर्ण लंबाई के रूप में सेट किया जा सकता है। उदाहरण के लिए, रैखिक ढाल के लिए background-image: linear-gradient(    rgb(61, 255, 2) 40%,    rgb(0, 174, 255) 80%,    rgb(255, 29, 29) 20% ); CSS का उपयोग करके रेखीय ग्रेडिएंट में स्थान का रं