Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de Gradients Kullanımını öğreneceğiz.
CSS'de Renk Geçişleri (Gradients) iki veya daha fazla renkler arasında yumuşak geçişler ile görüntü elde etmemize olanak sağlar.
CSS'de, 3 tür Gradients tanımlaması yapılabilir.:
CSS'de Linear bir gradients yani doğrusal bir renk geçişi oluşturmak için en az iki renge ihtiyaç vardır. Renklerle beraber, oluşacak olan renk geçişinin yönünüde ayarlayabilirsiniz.
Linear Gradients Syntax (Sözdizimi)
background-image: linear-gradient(yön, renk1, renk2, ...);
Aşağıdaki örnek, yukarıdan aşağıya doğru renk geçişini temsil etmektedir. Renkler kırmızı ile başlar ve sonrasında sarıya döner.
#box{ background-image: linear-gradient(red, yellow); }
Aşağıdaki örnek, soldan sağa doğru renk geçişini temsil etmektedir. Renkler kırmızı ile başlar ve sonrasında sarıya döner. CSS'deki linear-gradient özelliğinin ilk parametresine "to right" yazarak elde edilir.
#box{ background-image: linear-gradient(to right, red , yellow); }
Hem yatay hem de dikey başlangıç konumlarını belirterek çapraz olarak bir renk geçişi oluşturabiliriz.
Aşağıdaki örnek, sol üstten başlayan (ve sağ alta giden) doğrusal bir renk geçişini temsil etmektedir. Renkler kırmızı ile başlar ve sonrasında sarıya döner.
#box{ background-image: linear-gradient(to bottom right, red, yellow); }
Renk geçişlerinde daha fazla kontrol istiyorsanız, önceden tanımlanmış yönler yerine açılarlada renk geçişi sağlayabilirsiniz. Deg birimi açıyı temsil etmektedir :
#box{ background-image: linear-gradient(180deg, red, yellow); }
Linear bir renk geçişi sağlamak için en az iki renge ihitiyacımız olduğundan bahsetmiştik. İkiden fazla renk kullanarakta linear renk geçişi sağlayabiliriz. Aşağıdaki örnek, birden çok renge sahip doğrusal bir renk geçişini (yukarıdan aşağıya) göstermektedir:
#box{ background-image: linear-gradient(red, green, blue); }
CSS'deki gradient özellikleri, solma efektleri oluşturmak için kullanılabilecek şeffaflığı da destekler.
Saydamlık eklemek için renkleri tanımlarken 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, kırmızıya geçer:
#box{ background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }
CSS'de repeating-linear-gradient() özelliği, doğrusal renk geçişlerinde tekrar oluşturmak için kullanılır:
#box { background-image: repeating-linear-gradient(red, yellow 10%, blue 20%); }
CSS'de Radyal bir renk geçişi, merkezi tarafından tanımlanır.
Radyal bir renk geçişi oluşturmak için ayrıca en az iki renge ihtiyaç vardır.
Radial Gradients Syntax (Sözdizimi)
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Varsayılan olarak geçiş şekli elipstir, boyut ise en uzak köşedir ve geçiş konumu merkezdir.
Aşağıdaki örnek, eşit aralıklı renklere sahip bir radyal renk geçişini gösterir:
#box{ background-image: radial-gradient(red, green, blue); }
Aşağıdaki örnek, farklı aralıklı renklere sahip bir radyal renk geçişini gösterir:
#box{ background-image: radial-gradient(red 5%, blue 15%, green 60%); }
CSS'de radial-gradient özelliğinin ilk parametresi , oluşacak renk geçişinin şeklini tanımlar. Şekil parametresi çember (circle) veya elips (ellipse) alabilir. Varsayılan değer elipstir.
Aşağıdaki örnek, daire şeklinde bir radyal renk geçişini göstermektedir:
#box{ background-image: radial-gradient(circle, red, blue, green); }
size parametresi, renk geçişinin boyutunu tanımlar. Dört değer alabilir:
CSS'de repeating-radial-gradient() özelliği, doğrusal renk geçişlerinde tekrar oluşturmak için kullanılır:
#box{ background-image: repeating-radial-gradient(red, blue 10%, green 15%); }
CSS'de Conic Gradients, renk geçişlerinin bir merkez noktası etrafında döndürüldüğü bir renk geçişidir.
Konik bir renk geçişi oluşturmak için en az iki renk tanımlamanız gerekir.
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.
Aşağıdaki örnek, üç renkli bir konik renk geçişini göstermektedir:
#box{ background-image: conic-gradient(red, blue, green); }
Aşağıdaki örnek, üç renk ve her renk için bir derece içeren bir konik renk geçişini gösterir:
#box{ background-image: conic-gradient(red 45deg, blue90deg, green 210deg); }