सीएसएस रैखिक-ढाल () फ़ंक्शन
उदाहरण
यह रैखिक ढाल शीर्ष पर शुरू होती है। यह लाल रंग से शुरू होता है, पीले रंग में, फिर नीले रंग में:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
रैखिक-ढाल () फ़ंक्शन पृष्ठभूमि छवि के रूप में एक रैखिक ढाल सेट करता है।
एक लीनियर ग्रेडिएंट बनाने के लिए आपको कम से कम दो कलर स्टॉप्स को परिभाषित करना होगा। कलर स्टॉप वे रंग हैं जिनके बीच आप सहज ट्रांज़िशन प्रस्तुत करना चाहते हैं। आप ढाल प्रभाव के साथ एक प्रारंभिक बिंदु और एक दिशा (या कोण) भी सेट कर सकते हैं।
रैखिक ढाल का उदाहरण:
संस्करण: | CSS3 |
---|
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो फ़ंक्शन का पूर्ण समर्थन करता है।
-वेबकिट-, -मोज़-, या -ओ- के बाद नंबर एक उपसर्ग के साथ काम करने वाले पहले संस्करण को निर्दिष्ट करें।
Function | |||||
---|---|---|---|---|---|
linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
सीएसएस सिंटेक्स
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
Value | Description |
---|---|
direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
और ज्यादा उदाहरण
उदाहरण
एक रैखिक ढाल जो बाईं ओर से शुरू होती है। यह लाल रंग से शुरू होता है, नीले रंग में परिवर्तित होता है:
#grad {
background-image: linear-gradient(to right, red , blue);
}
उदाहरण
एक रैखिक ढाल जो ऊपर बाईं ओर से शुरू होती है (और नीचे दाईं ओर जाती है):
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
उदाहरण
एक निर्दिष्ट कोण के साथ एक रैखिक ढाल:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
उदाहरण
कई रंगों के साथ एक रैखिक ढाल रुकती है:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
उदाहरण
पारदर्शिता के साथ एक रैखिक ढाल:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस ग्रेडिएंट्स