फ़ंक्शन linear-gradient

फ़ंक्शन linear-gradient एक रैखिक ग्रेडिएंट सेट करता है। उन गुणों पर लागू होता है जो पृष्ठभूमि की छवि सेट करते हैं: background, background-image या बॉर्डर की छवि: border-image, background-image-source.

सिंटैक्स

cssसिलेक्टर {
  background: linear-gradient([कोण या दिशा], रंग1 आकार1, रंग2 आकार2...);
}

मान

उदाहरण . सबसे सरल विकल्प

सिंटैक्स:

cssसिलेक्टर {
  background: linear-gradient(प्रारंभिक रंग, अंतिम रंग);
}

आइए एक उदाहरण देखें:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(black, red);
  width: 200px;
  height: 200px;
}

Результат:

उदाहरण . कोण जोड़ना

सिंटैक्स:

cssसिलेक्टर {
  background: linear-gradient(कोण, प्रारंभिक रंग, अंतिम रंग);
}

आइए एक उदाहरण देखें:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(45deg, black, red);
  width: 200px;
  height: 200px;
}

Результат:

उदाहरण . दिशा जोड़ना

कोण के बजाय, दिशा जोड़ सकते हैं top, left, right, bottom या उनके संयोजन: top left, top right दिशा से पहले शब्द to लगाया जाता है।

सिंटैक्स:

cssसिलेक्टर {
  background: linear-gradient(दिशा, प्रारंभिक रंग, अंतिम रंग);
}

आइए एक उदाहरण देखें:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

उदाहरण . दिशा जोड़ना

आइए एक अलग दिशा निर्दिष्ट करें:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to top left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

उदाहरण . आकार जोड़ना

सिंटैक्स:

cssसिलेक्टर {
  background: linear-gradient(रंग1 आकार1, रंग2 आकार2);
}

अगले उदाहरण में व्यवहार इस प्रकार होगा: शुद्ध लाल रंग 0px से 30px तक होगा, 30px से 50px तक लाल से नीले रंग में ग्रेडिएंट होगा, और 50px से अंत तक - शुद्ध नीला रंग:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 30px, blue 50px);
  width: 200px;
  height: 200px;
}

Результат:

उदाहरण . 2 से अधिक रंग जोड़ना

सिंटैक्स:

cssसिलेक्टर {
  background: linear-gradient(रंग1 आकार1, रंग2 आकार2, रंग3 आकार3...);
}

अगले उदाहरण में व्यवहार इस प्रकार होगा: शुद्ध लाल रंग 0px से 30px तक होगा, 30px से 50px तक लाल से नीले रंग में ग्रेडिएंट होगा, और 50px से 70px तक - नीले से हरे रंग में ग्रेडिएंट होगा, और 70px के बाद - शुद्ध हरा रंग:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 30px, blue 50px, green 70px);
  width: 200px;
  height: 200px;
}

Результат:

उदाहरण . तीव्र संक्रमण

अगले उदाहरण में व्यवहार इस प्रकार होगा: शुद्ध लाल रंग 0px से 30px तक होगा, शुद्ध नीला रंग - 30px से 60px तक, शुद्ध हरा रंग - 60px के बाद (red 0px लिखना जरूरी नहीं है):

html<div id="elem"></div>

css#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% लिखना जरूरी नहीं है):

html<div id="elem"></div>

css#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; के कारण):

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
  background-size: 60px 60px;
  width: 200px;
  height: 200px;
}

Результат:

यह भी देखें