CSS conic-gradient() ਫੰਕਸ਼ਨ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

CSS ਦਾ conic-gradient() ਫੰਕਸ਼ਨ ਕੋਣੀ ਗ੍ਰੇਡੀਐਂਟ ਨੂੰ ਬੈਕਗਰਾਊਂਡ ਇਮੇਜ ਵਜੋਂ ਸੈਟ ਕਰਦਾ ਹੈ。

ਕੋਣੀ ਗ੍ਰੇਡੀਐਂਟ ਇੱਕ ਰੰਗ ਟ੍ਰਾਂਸੀਸ਼ਨ ਨੂੰ ਕੇਂਦਰ ਬਿੰਦੂ ਦੇ ਆਸ-ਪਾਸ ਚੱਕਰਵਾਤੀ ਢੰਗ ਨਾਲ ਕਰਦਾ ਹੈ (ਪਿੱਟਾ ਗਰਾਫ ਅਤੇ ਰੰਗ ਪਰਿਵਾਰ ਦੀ ਤਰ੍ਹਾਂ ਹੈ).

ਕੋਣੀ ਗ੍ਰੇਡੀਐਂਟ ਬਣਾਉਣ ਲਈ ਘੱਟੋ-ਘੱਟ ਦੋ ਰੰਗ ਸਟੋਪਪੁਂਟਸ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ。

ਕੋਣੀ ਗ੍ਰੇਡੀਐਂਟ ਉਦਾਹਰਣ:

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਤਿੰਨ ਰੰਗਾਂ ਵਾਲਾ ਕੋਣੀ ਗ੍ਰੇਡੀਐਂਟ:

#grad {
  background-image: conic-gradient(ਲਾਲ, ਪੈਲ, ਹਰੀ);
}

ਸਵੈ ਮੁਹਾਰਤ ਕਰੋ

ਉਦਾਹਰਣ 2

ਪੰਜ ਰੰਗਾਂ ਵਾਲਾ ਕੋਣੀ ਗ੍ਰੇਡੀਐਂਟ:

#grad {
  background-image: conic-gradient(ਲਾਲ, ਪੈਲ, ਹਰੀ, ਨੀਲਾ, ਕਾਲਾ);
}

ਸਵੈ ਮੁਹਾਰਤ ਕਰੋ

ਉਦਾਹਰਣ 3

ਤਿੰਨ ਰੰਗਾਂ ਵਾਲਾ ਕੋਣੀ ਗ੍ਰੇਡੀਐਂਟ ਅਤੇ ਹਰ ਰੰਗ ਨੂੰ ਇੱਕ ਚੁੰਡੀ ਨਾਮ ਦੇਣਾ:

#grad {
  background-image: conic-gradient(ਲਾਲ 45deg, ਪੈਲ 90deg, ਹਰੀ 210deg)
}

ਸਵੈ ਮੁਹਾਰਤ ਕਰੋ

ਉਦਾਹਰਣ 4

border-radius: 50% ਨੂੰ ਜੋੜ ਕੇ ਕੋਣੀ ਗ੍ਰੇਡੀਐਂਟ ਨੂੰ ਪਿੱਟਾ ਗਰਾਫ ਦੀ ਤਰ੍ਹਾਂ ਦਿਖਾਉਣਾ:

#grad {
  background-image: conic-gradient(ਲਾਲ, ਪੈਲ, ਹਰੀ, ਨੀਲਾ, ਕਾਲਾ);
  border-radius: 50%;
}

ਸਵੈ ਮੁਹਾਰਤ ਕਰੋ

ਉਦਾਹਰਣ 5

ਸ਼ੁਰੂਆਤੀ ਅਨੁਮਾਨ ਵਾਲੀ ਕੋਣੀ ਗ੍ਰੇਡੀਐਂਟ:

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}

ਸਵੈ ਮੁਹਾਰਤ ਕਰੋ

ਉਦਾਹਰਣ 6

ਕੇਂਦਰ ਸਥਾਨ ਵਾਲੀ ਕੋਣੀ ਗ੍ਰੇਡੀਐਂਟ:

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

ਸਵੈ ਮੁਹਾਰਤ ਕਰੋ

ਉਦਾਹਰਣ 7

ਸ਼ੁਰੂਆਤੀ ਅਨੁਮਾਨ ਅਤੇ ਕੇਂਦਰ ਸਥਾਨ ਵਾਲੀ ਕੋਣੀ ਗ੍ਰੇਡੀਐਂਟ:

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

ਸਵੈ ਮੁਹਾਰਤ ਕਰੋ

ਉਦਾਹਰਣ 8

ਇੱਕ ਹੋਰ ਪਾਇਰੇ ਗ੍ਰੇਡੀਐਂਟ ਉਦਾਹਰਣ:

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

ਸਵੈ ਮੁਹਾਰਤ ਕਰੋ

CSS ਸਿਫਾਰਸ਼

background-image: conic-gradient([from angle] [at position,] color degree, color degree, ... );

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਟੇਬਲ ਵਿੱਚ ਸੰਖਿਆਵਾਂ ਪਹਿਲੀ ਤੋਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਨੂੰ ਦਰਸਾਉਂਦੀਆਂ ਹਨ。

ਸਬੰਧਤ ਪੰਨੇ

ਸਿੱਖਿਆਚਾਰਕਰਨ:CSS ਗ੍ਰੇਡੀਐਂਟ

مطالبه:CSS background-image ਵਿਸ਼ੇਸ਼ਤਾ

مطالبه:CSS linear-gradient() ਫੰਕਸ਼ਨ

مطالبه:CSS radial-gradient() ਫੰਕਸ਼ਨ

مطالبه:CSS repeating-conic-gradient() ਫੰਕਸ਼ਨ

مطالبه:CSS repeating-linear-gradient() ਫੰਕਸ਼ਨ

مطالبه:CSS repeating-radial-gradient() فنکشن