CSS Gradyanları
CSS degradeleri, iki veya daha fazla belirtilen renk arasında yumuşak geçişler görüntülemenize olanak tanır.
CSS, üç tür degrade tanımlar:
- Doğrusal Gradyanlar (aşağı/yukarı/sola/sağa/çapraz olarak gider)
- Radyal Gradyanlar (merkezlerine göre tanımlanır)
- Konik Gradyanlar (bir merkez noktası etrafında döndürülür)
CSS Doğrusal Gradyanlar
Doğrusal bir gradyan oluşturmak için en az iki renk durağı tanımlamanız gerekir. Renk durakları, aralarında yumuşak geçişler oluşturmak istediğiniz renklerdir. Degrade efektiyle birlikte bir başlangıç noktası ve yön (veya açı) da ayarlayabilirsiniz.
Sözdizimi
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Yön - Yukarıdan Aşağıya (bu varsayılandır)
Aşağıdaki örnek, yukarıdan başlayan doğrusal bir gradyanı göstermektedir. Kırmızıyla başlar, sarıya döner:
Örnek
#grad {
background-image: linear-gradient(red, yellow);
}
Yön - Soldan Sağa
Aşağıdaki örnek, soldan başlayan doğrusal bir gradyanı göstermektedir. Kırmızıyla başlar, sarıya döner:
Örnek
#grad {
background-image: linear-gradient(to right, red , yellow);
}
Yön - Çapraz
Hem yatay hem de dikey başlangıç konumlarını belirterek çapraz olarak bir degrade oluşturabilirsiniz.
Aşağıdaki örnek, sol üstten başlayan (ve sağ alta giden) doğrusal bir gradyan gösterir. Kırmızıyla başlar, sarıya döner:
Örnek
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
Açıları Kullanmak
Degradenin yönü üzerinde daha fazla kontrol istiyorsanız, önceden tanımlanmış yönler (aşağıya, yukarıya, sağa, sola, sağ alta vb.) yerine bir açı tanımlayabilirsiniz. 0deg değeri "top"a eşdeğerdir. 90deg değeri "sağa" eşdeğerdir. 180 derecelik bir değer "alt"a eşdeğerdir.
Sözdizimi
background-image: linear-gradient(angle, color-stop1, color-stop2);
Aşağıdaki örnek, doğrusal gradyanlarda açıların nasıl kullanılacağını gösterir:
Örnek
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
Çoklu Renk Duraklarını Kullanma
Aşağıdaki örnek, birden çok renk durağına sahip doğrusal bir degradeyi (yukarıdan aşağıya) göstermektedir:
Örnek
#grad {
background-image: linear-gradient(red, yellow, green);
}
Aşağıdaki örnek, gökkuşağının rengi ve bir miktar metinle doğrusal bir degradenin (soldan sağa) nasıl oluşturulacağını gösterir:
Örnek
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Şeffaflığı Kullanma
CSS gradyanları, solma efektleri oluşturmak için kullanılabilecek şeffaflığı da destekler.
Saydamlık eklemek için renk duraklarını tanımlamak için rgba() işlevini kullanırız. rgba() işlevindeki son parametre 0 ile 1 arasında bir değer olabilir ve rengin şeffaflığını tanımlar: 0 tam şeffaflığı gösterir, 1 tam rengi gösterir (saydamlık yok).
Aşağıdaki örnek, soldan başlayan doğrusal bir gradyanı göstermektedir. Tamamen şeffaf başlar, tam renkli kırmızıya geçer:
Örnek
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
Doğrusal gradyanı tekrarlama
Yinelenen-doğrusal-gradyan() işlevi, doğrusal gradyanları tekrarlamak için kullanılır:
Örnek
Yinelenen bir doğrusal gradyan:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}