CSS Konik Gradyanlar
CSS Konik Gradyanlar
Konik gradyan, renk geçişlerinin bir merkez noktası etrafında döndürüldüğü bir gradyandır.
Konik bir degrade oluşturmak için en az iki renk tanımlamanız gerekir.
Sözdizimi
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
Varsayılan olarak açı 0 derecedir ve konum merkezdir.
Derece belirtilmezse renkler orta noktanın etrafına eşit olarak yayılır.
Konik Gradyan: Üç Renk
Aşağıdaki örnek, üç renkli bir konik gradyanı göstermektedir:
Örnek
Üç renkli konik bir gradyan:
#grad {
background-image: conic-gradient(red, yellow, green);
}
Konik Gradyan: Beş Renk
Aşağıdaki örnek, beş renkli bir konik gradyanı göstermektedir:
Örnek
Beş renkli konik bir gradyan:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
Konik Gradyan: Üç Renk ve Derece
Aşağıdaki örnek, üç renk ve her renk için bir derece içeren bir konik gradyan gösterir:
Örnek
Üç renk ve her renk için bir derece içeren konik bir gradyan:
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
}
Pasta Grafikleri Oluşturun
border-radius: 50%Konik gradyanı pasta gibi göstermek için eklemeniz yeterlidir:
Örnek
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
İşte tüm renkler için tanımlanmış derecelere sahip başka bir pasta grafik:
Örnek
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
Açıdan Belirtilen Konik Gradyan
[ Açıdan ], tüm konik gradyanın döndürüldüğü bir açıyı belirtir.
Aşağıdaki örnek, 90 derecelik bir açıya sahip bir konik gradyanı göstermektedir:
Örnek
Bir açıdan bir konik gradyan:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
Belirtilen Merkez Konumuna Sahip Konik Gradyan
[ konumda ] konik eğimin merkezini belirtir.
Aşağıdaki örnek, %60 %45 merkez konumuna sahip konik bir eğimi göstermektedir:
Örnek
Belirli bir merkez konumuna sahip bir konik gradyan:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
Konik Gradyanı Tekrarlama
İşlev repeating-conic-gradient(), konik gradyanları tekrarlamak için kullanılır:
Örnek
Yinelenen bir konik gradyan:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
Tanımlanmış renk başlangıçları ve renk durakları ile yinelenen bir konik gradyan:
Örnek
Tanımlanmış renk başlangıçları ve renk durakları ile yinelenen bir konik gradyan:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
CSS Gradyan İşlevleri
Aşağıdaki tablo, CSS gradyan işlevlerini listeler:
| Function | Description |
|---|---|
| conic-gradient() | Creates a conic gradient. Define at least two colors (around a center point) |
| linear-gradient() | Creates a linear gradient. Define at least two colors (top to bottom) |
| radial-gradient() | Creates a radial gradient. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |