CSS conic-gradient() fonksiyonu

tanımı ve kullanımı

CSS'nin conic-gradient() fonksiyon, arka plan grafiği olarak konik-gradyan'ı ayarlar.

Konik gradyan, merkezi nokta etrafında dönen bir renk geçişi olan bir gradyan türüdür (sütun grafiği ve renk çarkına benzer).

Konik gradyan oluşturmak için en az iki renk durdurma noktası tanımlanmalıdır.

üç renkli bir konik-gradyan vardır:

#grad {
  background-image: konik-gradyan(red, yellow, green);
}

beş renkli bir konik-gradyan vardır:

#grad {
  background-image: konik-gradyan(red, yellow, green, blue, black);
}

üç renk ve her renge bir açı belirleyen konik-gradyan vardır:

#grad {
  background-image: konik-gradyan(red 45derece, yellow 90derece, green 210derece);
}

border-radius: 50% eklenerek konik-gradyan'ın sütun grafiği gibi görünmesini sağlar:

#grad {
  background-image: konik-gradyan(red, yellow, green, blue, black);
  border-radius: 50%;
}

Başlangıç açısı olan konik eğrisel geçiş:

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

Merkezi konumu olan konik eğrisel geçiş:

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

Aynı zamanda başlangıç açısı ve merkezi konumu olan konik eğrisel geçiş:

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

Diğer bir ekmek dilim örnegi:

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

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

Değer	Açıklama
from angle	Seçmeli. Tüm konik eğrisel geçişler bu açıya göre döndürülür. Varsayılan değeri 0deg'dir.
at position	Seçmeli. Konik eğrisel geçişin merkezi konumunu belirtir. Varsayılan değeri center'dır.
color degree, ... , color degree	Renk durak noktaları, arasında pürüzsüz geçiş yapmayı istediğiniz renklerdir. Bu değer, renk değerlerini ve seçmeli durak noktalarını (0 ila 360 derece arasındaki açı veya 0% ila 100% arasındaki yüzdelik) içerir.

Değer

Açıklama

from angle

Seçmeli. Tüm konik eğrisel geçişler bu açıya göre döndürülür. Varsayılan değeri 0deg'dir.

at position

Seçmeli. Konik eğrisel geçişin merkezi konumunu belirtir. Varsayılan değeri center'dır.

color degree, ... , color degree

Renk durak noktaları, arasında pürüzsüz geçiş yapmayı istediğiniz renklerdir.

Bu değer, renk değerlerini ve seçmeli durak noktalarını (0 ila 360 derece arasındaki açı veya 0% ila 100% arasındaki yüzdelik) içerir.