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.:
- Linear Gradients (Doğrusal Gradyanlar) : aşağı/yukarı/sola/sağa/çapraz olarak gider.
- Radial Gradients (Radyal Gradyanlar) : merkezlerine göre tanımlanır
- Conic Gradients (Konik Gradyanlar) : bir merkez noktası etrafında döndürülür
CSS Linear Gradients Kullanımı
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, ...);
Yukarıdan Aşağıya Renk Geçişi (Varsayılan)
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);
}
Soldan Sağa Doğru Renk Geçişi
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);
}
Çapraz Renk Geçişi
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);
}
Açıları Kullanarak Renk Geçişi Tanımlamak
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 :
- 0deg değeri "top" değerine eşittir
- 90deg değeri "right" değerine eşittir.
- 180deg değeri ise "bottom" değerine eşittir.
#box{
background-image: linear-gradient(180deg, red, yellow);
}
Çoklu Renkler Kullanarak Renk Geçişi Yapmak
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);
}
Renk Geçişlerinde Transparan Uygulamak
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));
}
Tekrarlanan Doğrusal Renk Geçişi
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 Radial Gradients Kullanımı
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.
Eşit Aralıklı Renk Geçişleri(Varsayılan)
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);
}
Farklı Aralıklı Renk Geçişleri
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%);
}
Farklı Şekiller ile Renk Geçişi Oluşturma
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);
}
Radial Gradients Boyut Kullanımları
size parametresi, renk geçişinin boyutunu tanımlar. Dört değer alabilir:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Tekrarlanan Radial Renk Geçişi
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 Conic Gradients Kullanımı
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.
3 Renkli Konik Renk Geçişi
Aşağıdaki örnek, üç renkli bir konik renk geçişini göstermektedir:
#box{
background-image: conic-gradient(red, blue, green);
}
3 Renkli ve Açılarak Kullanılarak Renk Geçişi
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);
}
