फ़ंक्शन linear-gradient
फ़ंक्शन linear-gradient एक रैखिक
ग्रेडिएंट सेट करता है। उन गुणों पर लागू होता है जो
पृष्ठभूमि की छवि सेट करते हैं: background,
background-image
या बॉर्डर की छवि: border-image,
background-image-source.
सिंटैक्स
सिलेक्टर {
background: linear-gradient([कोण या दिशा], रंग1 आकार1, रंग2 आकार2...);
}
मान
| मान | विवरण |
|---|---|
| दिशा |
कोणों के लिए किसी भी इकाई में
या कीवर्ड top, left, right, bottom के द्वारा
ग्रेडिएंट की एक विशिष्ट दिशा सेट करता है।
या उनके संयोजन द्वारा: top left, top right इत्यादि।
शब्दों का क्रम मायने नहीं रखता: top left और left top लिख सकते हैं,
कोई अंतर नहीं है। पैरामीटर वैकल्पिक है: यदि इसे नहीं लिखा जाता है, तो ग्रेडिएंट
ऊपर से नीचे की ओर जाएगा (जैसे to top के साथ)। दिशा से पहले शब्द to लगाया जाता है।
|
| कोण | कोणों के लिए किसी भी इकाई में कोण। यह सकारात्मक या नकारात्मक हो सकता है। पैरामीटर वैकल्पिक है। एक साथ या तो कोण, या दिशा सेट की जा सकती है (या कुछ भी नहीं)। |
| रंग1 | रंग के लिए किसी भी इकाई में ग्रेडिएंट का प्रारंभिक रंग। |
| रंग2 | रंग के लिए किसी भी इकाई में ग्रेडिएंट का अंतिम रंग। |
| आकार | आकार के लिए किसी भी इकाई में ग्रेडिएंट के एक विशिष्ट रंग की विस्तार लंबाई सेट करता है। |
उदाहरण . सबसे सरल विकल्प
सिंटैक्स:
सिलेक्टर {
background: linear-gradient(प्रारंभिक रंग, अंतिम रंग);
}
आइए एक उदाहरण देखें:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
उदाहरण . कोण जोड़ना
सिंटैक्स:
सिलेक्टर {
background: linear-gradient(कोण, प्रारंभिक रंग, अंतिम रंग);
}
आइए एक उदाहरण देखें:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
उदाहरण . दिशा जोड़ना
कोण के बजाय, दिशा जोड़ सकते हैं
top, left, right, bottom
या उनके संयोजन: top left, top right
दिशा से पहले शब्द to लगाया जाता है।
सिंटैक्स:
सिलेक्टर {
background: linear-gradient(दिशा, प्रारंभिक रंग, अंतिम रंग);
}
आइए एक उदाहरण देखें:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
उदाहरण . दिशा जोड़ना
आइए एक अलग दिशा निर्दिष्ट करें:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
उदाहरण . आकार जोड़ना
सिंटैक्स:
सिलेक्टर {
background: linear-gradient(रंग1 आकार1, रंग2 आकार2);
}
अगले उदाहरण में व्यवहार इस प्रकार होगा:
शुद्ध लाल रंग 0px से
30px तक होगा, 30px से 50px तक
लाल से नीले रंग में ग्रेडिएंट होगा, और
50px से अंत तक - शुद्ध नीला रंग:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
उदाहरण . 2 से अधिक रंग जोड़ना
सिंटैक्स:
सिलेक्टर {
background: linear-gradient(रंग1 आकार1, रंग2 आकार2, रंग3 आकार3...);
}
अगले उदाहरण में व्यवहार इस प्रकार होगा:
शुद्ध लाल रंग 0px से
30px तक होगा, 30px से 50px तक
लाल से नीले रंग में ग्रेडिएंट होगा, और
50px से 70px तक - नीले से हरे रंग में ग्रेडिएंट
होगा, और 70px के बाद - शुद्ध हरा रंग:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
उदाहरण . तीव्र संक्रमण
अगले उदाहरण में व्यवहार इस प्रकार होगा:
शुद्ध लाल रंग 0px से
30px तक होगा, शुद्ध नीला रंग - 30px
से 60px तक, शुद्ध हरा रंग - 60px के बाद
(red 0px लिखना जरूरी नहीं है):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
उदाहरण . आकार प्रतिशत में भी सेट किए जा सकते हैं
अगले उदाहरण में व्यवहार इस प्रकार होगा:
शुद्ध लाल रंग 0% से
30% तक होगा, शुद्ध नीला रंग - 30%
से 60% तक, शुद्ध हरा रंग - 60% के बाद
(red 0% लिखना जरूरी नहीं है):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
उदाहरण . background-size के साथ संयोजन
अगले उदाहरण में व्यवहार इस प्रकार होगा:
शुद्ध लाल रंग 0px से
30px तक होगा, शुद्ध नीला रंग - 30px
से 60px तक, और यह सब 60px के टुकड़ों में दोहराया जाएगा
(background-size:
60px; के कारण):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
यह भी देखें
-
फ़ंक्शन
radial-gradient,
जो एक रेडियल ग्रेडिएंट बनाता है -
फ़ंक्शन
repeating-linear-gradient,
जो एक दोहराया जाने वाला रैखिक ग्रेडिएंट बनाता है -
फ़ंक्शन
repeating-radial-gradient,
जो एक दोहराया जाने वाला रेडियल ग्रेडिएंट बनाता है
