CSS Conic Gradient Kullanımı
Giriş
Diğer bir çok gradient efekti gibi henüz yeni sayılabilecek farklı bir gradient özelliği. Conical Gradient henüz tarayıcıları çoğu tarafından desteklenmese de popüler tarayıcılar arasında kullanılabilecek bir özellik.
Örneklerle gösterelim,
İstediğiniz kadar renk atayabilirsiniz. Soldan başlayarak en son renk paletine kadar dairesel bir şekil ile karşımıza çıkmakta.
Sözdizimi
Conic Gradient aşağıdaki şekilde parametre alır.
Diğer bir çok gradient efekti gibi henüz yeni sayılabilecek farklı bir gradient özelliği. Conical Gradient henüz tarayıcıları çoğu tarafından desteklenmese de popüler tarayıcılar arasında kullanılabilecek bir özellik.
Örneklerle gösterelim,
İstediğiniz kadar renk atayabilirsiniz. Soldan başlayarak en son renk paletine kadar dairesel bir şekil ile karşımıza çıkmakta.
Sözdizimi
Conic Gradient aşağıdaki şekilde parametre alır.
conic-gradient() = conic-gradient(
[ from <açı> ]? [ at <pozisyon> ]?, <renkler>
)
Aşağıda en basit haliyle kullanımı örnek gösterilmiştir
.conic-gradient {
background: conic-gradient(#fff, #000);
}
from <açı> yani örnek olarak from 0deg veya from 30deg şeklindeki değerler ile renklerin hangi açıdan itibaren başlayacağını belirtiriz.
at <pozisyon> yani örnek olarak at 50% 50% dediğimiz zaman soldaki yatay eksende sağdaki de dikey eksende merkezi noktanın konumunu belirler.
Aşağıda tüm örnekleri görüntüleyebilirsiniz.
.conic-gradient {
/* Basit hali */
background-image: conic-gradient(#fff, #000);
/* Başlangıç konumunu belirle */
background: conic-gradient(at 50% 50%, #fff, #000);
/* Başlangıç açısını belirle */
background: conic-gradient(from 0deg, #fff, #000);
/* Başlangıç noktası ve başlangıç konumunu bir arada belirle */
background: conic-gradient(from 0deg at center, #fff, #000);
/* Renklerin açılarını yüzde olarak belirle */
background: conic-gradient(#fff 0%, #000 100%);
/* Başlangıç renginin açısını derece cinsinden ve bitiş rengini dairenin tam bir dönüşü ile bitir */
background: conic-gradient(#fff 0deg, #000 1turn);
}
Eğer açı değeri girmezsek 0 dan 360 dereceye kadar keskin bir çizgi oluşturur. Burada daha yumuşak bir görüntü elde etmek için başlangıç ve bitiş renklerini aynı yapabilirsiniz. Böylece örneğin yukarıdan bakınca koni görünümü veren bir görüntü elde edebilirsiniz.
Aşağıdaki örnekteki gibi bir görüntü elde edip animasyon ile döndür komutu vererek bir Mac efekti verebilirsiniz.
.conic-gradient {
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}
Renkler arasında sabitleme sayısal değerleri girerek daha keskin görünümler elde edebilirsiniz.
.conic-gradient {
background: conic-gradient(lime 40%, yellow 0 70%, red 0);
}
Conic gradient 'in tarayıcı desteği listesine aşağıdan ulaşabilirsiniz.
https://caniuse.com/#search=conic%20gradient
Daha deylı bilgi için W3C resmi sayfasına gözatabilirsiniz.
https://www.w3.org/TR/css-images-4/#conic-gradients
2013 yılında geniş hayaller ile önce tasarım sonra da yazılım alanında çalışmalar yapmaya başladım. Sıfırdan başlayarak pek çok MVC tabanlı sistemler ve Web Sayfaları tasarladım.