Geçişli Renk (Gradient)
Faklı renk tonlarının doğrusal veya radyal bir şekilde birbirine karıştığı renkler geçişli renklerdir. Geçişli renkler elemanların “background” stil özelliğine uygulanır.Doğrusal Renk Geçişi: Renk tonlarının belirtilen yönlere (soldan sağa, yukarıdan aşağıya vb.)göre doğrusal bir şekilde geçiş yapması için “linear-gradient” komutu kullanılır. En az iki renk ara sında geçiş yapılır.
Faklı renk tonlarının doğrusal veya radyal bir şekilde birbirine karıştığı renkler geçişli renkler dir. Geçişli renkler elemanların “background” stil özelliğine uygulanır. Doğrusal Renk Geçişi: Renk tonlarının belirtilen yönlere (soldan sağa, yukarıdan aşağıya vb.) göre doğrusal bir şekilde geçiş yapması için “linear-gradient” komutu kullanılır. En az iki renk ara sında geçiş yapılır.
background:linear-gradient(red,white,blue);
background:linear-gradient(red,white,blue,black);
En basit kullanımı sadece renklerin belirlendiği yukarıdaki örnek kodlarda olduğu gibidir. Hiç bir yön verilmediği için yukarıdan aşağıya doğrusal bir geçiş gerçekleşir.
background:linear-gradient(to right,red,white); /* Soldan sağa geçiş */
background:linear-gradient(to bottom,red,white); /* Yukarıdan aşağıya geçiş */
background:linear-gradient(to left,red,white); /* Sağdan sola geçiş */
background:linear-gradient(to top right,red,white); /*Sağ üst çapraza geçiş */
background:linear-gradient(to top left,red,white); /* Sol üst çapraza geçiş */
background:linear-gradient(to bottom right,red,white); /* Sağ alt çapraza geçiş */
background:linear-gradient(to bottom left,red,white); /* Sol alt çapraza geçiş */
Renkler arası geçişler, yukarıdaki örnek kodlarda görüldüğü gibi geçiş yönü belirterek de yapı labilir. Renk sayısı ikiden fazla olabilir.
background:linear-gradient(90deg,red,white);
background:linear-gradient(180deg,red,white);
Renkler arası geçişlerin yönü, yukarıdaki örnek kodlarda görüldüğü gibi “0-180” arasında her hangi bir açı değeri ile de belirlenebilir.
