CSS ਗਰੇਡੀਐਂਟ

ਗ੍ਰੇਡੇਂਟ ਬੈਕਗਰਾਊਂਡ

CSS ਗ੍ਰੇਡੀਐਂਟ ਤੁਹਾਨੂੰ ਦੋ ਜਾਂ ਵੱਧ ਰੰਗਾਂ ਦਰਮਿਆਨ ਸਮੁੱਚੇ ਤੌਰ 'ਤੇ ਸ਼ਾਨਦਾਰ ਤਬਦੀਲੀ ਦਿਖਾਉਣ ਦੀ ਸਮਰੱਥਾ ਦਿੰਦੇ ਹਨ。

CSS ਨੇ ਦੋ ਪ੍ਰਕਾਰ ਦੇ ਗ੍ਰੇਡੀਐਂਟ ਨਿਰਧਾਰਿਤ ਕੀਤੇ ਹਨ:

  • ਲਾਈਨਰੀ ਗ੍ਰੇਡੀਐਂਟ(- ਨਿਊਨ/ਉੱਚਾ/ਖੱਬੇ/ਸੱਜੇ/ਦੁਵੱਲੇ)
  • ਰੈਡੀਅਲ ਗ੍ਰੇਡੀਐਂਟ(- ਕੇਂਦਰ ਦੁਆਰਾ ਨਿਰਧਾਰਿਤ)

CSS ਲਾਈਨਰੀ ਗ੍ਰੇਡੀਐਂਟ

ਲਾਈਨਰੀ ਗ੍ਰੇਡੀਐਂਟ ਬਣਾਉਣ ਲਈ ਤੁਹਾਨੂੰ ਮਿਨੀਮਲ ਤੌਰ 'ਤੇ ਦੋ ਰੰਗ ਬੈਂਡ ਨਿਰਧਾਰਤ ਕਰਨਾ ਹੋਵੇਗਾ। ਰੰਗ ਬੈਂਡ ਉਹ ਰੰਗ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਤੁਸੀਂ ਸਮੁੱਚੇ ਤੌਰ 'ਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤੁਸੀਂ ਵੀ ਸ਼ੁਰੂ ਸਥਾਨ ਅਤੇ ਦਿਸ਼ਾ (ਜਾਂ ਕੋਣ) ਅਤੇ ਗ੍ਰੇਡੀਐਂਟ ਪ੍ਰਭਾਵ ਨੂੰ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ।

ਗਰੰਥ

background-image: linear-gradient(ਦਿਸ਼ਾ, color-stop1, color-stop2, ...);

ਲਾਈਨਰੀ ਗ੍ਰੇਡੀਐਂਟ - ਉੱਚੇ ਤੋਂ ਨਿਊਨ (ਮੂਲ ਰੂਪ)

ਇਹ ਉਦਾਹਰਣ ਉੱਚੇ ਤੋਂ ਨਿਊਨ ਲਈ ਲਾਈਨਰੀ ਗ੍ਰੇਡੀਐਂਟ ਦਿਸ਼ਾ ਵਿਖਾਉਂਦਾ ਹੈ। ਇਹ ਲਾਲ ਤੋਂ ਸੂਰਜੀ ਹਰੇ ਤੱਕ ਵਿਸ਼ਿਸ਼ਟ ਹੈ:

从上到下（默认）

实例

#grad {
  background-image: linear-gradient(red, yellow);
}

آپ خود سجاو

ਲਾਈਨਰ ਗ੍ਰੇਡੇਂਟ - ਖੱਬੇ ਤੋਂ ਸੱਜੇ

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਦੇ ਲਾਈਨਰ ਗ੍ਰੇਡੇਂਟ ਨੂੰ ਦਿਸਾਉਂਦਾ ਹੈ। ਇਹ ਲਾਲ ਰੰਗ ਤੋਂ ਸੰਜਮ ਰੰਗ ਤੱਕ ਪਰਿਵਰਤਨ ਕਰਦਾ ਹੈ:

ਖੱਬੇ ਤੋਂ ਸੱਜੇ

实例

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

آپ خود سجاو

ਲਾਈਨਰ ਗ੍ਰੇਡੇਂਟ - ਦਿਆਗ੍ਰੇਡ

ਆਪਣੇ ਹੰਗਾਮੇ ਅਤੇ ਸਿਧਾਂਤਕ ਸਥਾਨ ਨੂੰ ਸਪੱਸ਼ਟ ਕਰਕੇ ਦਿਆਗ੍ਰੇਡ ਗ੍ਰੇਡੇਂਟ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਕਿਉਂਕਿ ਆਪਣੇ ਹੰਗਾਮੇ ਅਤੇ ਸਿਧਾਂਤਕ ਸਥਾਨ ਨੂੰ ਸਪੱਸ਼ਟ ਕਰਕੇ ਦਿਆਗ੍ਰੇਡ ਗ੍ਰੇਡੇਂਟ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਕਿਉਂਕਿ ਆਪਣੇ ਹੰਗਾਮੇ ਅਤੇ ਸਿਧਾਂਤਕ ਸਥਾਨ ਨੂੰ ਸਪੱਸ਼ਟ ਕਰਕੇ ਦਿਆਗ੍ਰੇਡ ਗ੍ਰੇਡੇਂਟ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਕਿਉਂਕਿ ਆਪਣੇ ਹੰਗਾਮੇ ਅਤੇ ਸਿਧਾਂਤਕ ਸਥਾਨ ਨੂੰ ਸਪੱਸ਼ਟ ਕਰਕੇ ਦਿਆਗ੍ਰੇਡ ਗ੍ਰੇਡੇਂਟ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਖੱਬੇ ਉੱਪਰ ਤੋਂ ਨੀਚੇ ਸੱਜੇ (ਸਮਾਪਤ ਹੋਣ ਵਾਲੇ) ਦੇ ਲਾਈਨਰ ਗ੍ਰੇਡੇਂਟ ਨੂੰ ਦਿਸਾਉਂਦਾ ਹੈ। ਇਹ ਲਾਲ ਰੰਗ ਤੋਂ ਸੰਜਮ ਰੰਗ ਤੱਕ ਪਰਿਵਰਤਨ ਕਰਦਾ ਹੈ:

ਖੱਬੇ ਉੱਪਰ ਤੋਂ ਨੀਚੇ ਸੱਜੇ

实例

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

آپ خود سجاو

ਕੋਣ ਦੀ ਵਰਤੋਂ

ਜੇਕਰ ਤੁਸੀਂ ਗ੍ਰੇਡੇਂਟ ਕੋਣ ਨੂੰ ਹੋਰ ਕੰਟਰੋਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇੱਕ ਕੋਣ ਨਿਰਧਾਰਿਤ ਕਰ ਸਕਦੇ ਹੋ, ਜੋ ਪ੍ਰਿਮੀਟਿਵ ਦਿਸ਼ਾਵਾਂ (ਨਿਚੇ, ਉੱਪਰ, ਸੱਜੇ, ਖੱਬੇ, ਸੱਜੇ ਤੋਂ ਨੀਚੇ ਆਦਿ) ਦੀ ਥਾਂ ਲੈ ਸਕਦਾ ਹੈ)। ਮੁੱਲ 0deg ਉੱਪਰ ਨੂੰ ਦਿਸਾਉਂਦਾ ਹੈ। ਮੁੱਲ 90deg ਸੱਜੇ ਨੂੰ ਦਿਸਾਉਂਦਾ ਹੈ। ਮੁੱਲ 180deg ਨੀਚੇ ਨੂੰ ਦਿਸਾਉਂਦਾ ਹੈ。

180deg

ਗਰੰਥ

background-image: linear-gradient(angle, color-stop1, color-stop2);

ਇਹ ਕੋਣ ਹੰਗਾਮੇ ਅਤੇ ਗ੍ਰੇਡੇਂਟ ਲਾਈਨ ਦਰਮਿਆਨ ਦਾ ਕੋਣ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਲਾਈਨਰ ਗ੍ਰੇਡੇਂਟ ਉੱਤੇ ਕਿਵੇਂ ਕੋਣ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ:

实例

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

آپ خود سجاو

ਕਈ ਰੰਗ ਬੈਕਰਨ ਦੀ ਵਰਤੋਂ

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਕਈ ਰੰਗ ਬੈਕਰਨਾਂ ਵਾਲੇ ਲਾਈਨਰ ਗ੍ਰੇਡੇਂਟ (ਉੱਤੇ ਤੋਂ ਨੀਚੇ) ਦਿਸਾਉਂਦਾ ਹੈ:

实例

#grad {
  background-image: linear-gradient(red, yellow, green);
}

آپ خود سجاو

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਇਹ ਦਿਸਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਕੈਂਡਲ ਰੰਗਾਂ ਅਤੇ ਕੁਝ ਟੈਕਸਟ ਨਾਲ ਲਾਈਨਰ ਗ੍ਰੇਡੇਂਟ (ਖੱਬੇ ਤੋਂ ਸੱਜੇ) ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ:

ਗ੍ਰੇਡੇਂਟ ਬੈਕਗਰਾਊਂਡ

实例

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

آپ خود سجاو

ਪਾਰਦਰਸ਼ਤਾ ਦੀ ਵਰਤੋਂ

CSS ਗ੍ਰੇਡੇਂਟ ਪਾਰਦਰਸ਼ਤਾ ਨੂੰ ਵੀ ਸਮਰਥਨ ਕਰਦਾ ਹੈ ਅਤੇ ਗ੍ਰੇਡੇਂਟ ਇਫੈਕਟ ਬਣਾਉਣ ਲਈ ਵੀ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।

ਜੇਕਰ ਪਾਰਦਰਸ਼ਤਾ ਜੋੜਣਾ ਹੈ, ਅਸੀਂ rgba() ਫੰਕਸ਼ਨ ਨਾਲ ਰੰਗ ਬੈਕਰਨ ਨਿਰਧਾਰਿਤ ਕਰਦੇ ਹਾਂ। rgba() ਫੰਕਸ਼ਨ ਦੇ ਆਖਰੀ ਪੈਰਾਮੀਟਰ 0 ਤੋਂ 1 ਦਾ ਮੁੱਲ ਹੋ ਸਕਦਾ ਹੈ, ਇਹ ਰੰਗ ਦੀ ਪਾਰਦਰਸ਼ਤਾ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ: 0 ਪੂਰੀ ਪਾਰਦਰਸ਼ਤਾ, 1 ਪੂਰੀ ਰੰਗ (ਪਾਰਦਰਸ਼ਤਾ ਨਹੀਂ)।

下面的例子展示了从左开始的线性渐变。它开始完全透明，然后过渡为全色红色：

实例

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

آپ خود سجاو

重复线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

实例

重复的线性渐变：

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

آپ خود سجاو