Gradient, CSS'de renk geçişini sağlayan özelliktir. Bir renkten diğer bir renge geçişi sağlayan bu özellikle resim kullanmadan tasarım yapabiliriz.
İki farklı gradient vardır.
- Linear - Doğrusal Gradient
- Radial - Radyal Gradient
Linear Gradient'ler doğrusal bir yönde renk geçişini sağlar.
Linear
style="background:linear-gradient(red,yellow);height:250px;"
İlk div'de renk geçişi aşağı yönde kırmızıdan sarıya bir renk geçişi olmuştur. Bu linear gradient için varsayılan(default) bir özelliktir. İlk renk başlangıç rengi, en son renk ise bitiş rengidir.
Linear
style="background:linear-gradient(to right,red,yellow);height:250px;"
Bu div için renk geçişi soldan sağa doğru kırmızıdan sarıya bir renk geçişi olmuştur.
Linear
style="background:linear-gradient(to bottom,green,blue);height:250px;"
Bu div için aşağı yönde yeşilden maviye bir renk geçişi olmuştur. to top parametresi verirsek aşağıdan yukarı doğru renk geçişi yapabiliriz. to bottom parametresi ise aşağı yönde anlamına gelmektedir.
Linear
style="background:linear-gradient(to bottom right,red,#004000);height:250px;"
Bu div için to bottom right parametresi sağ alta doğru renk değişimi yapar.
Linear
Bu div için repeating-linear-gradient kullanılmıştır. İlk renk başlangıç rengi olmakla beraber tekrarın başladığı renktir.
style="background:repeating-linear-gradient(red ,green 5%,yellow 10%);height:250px;"
Radial Gradient'ler ise tek bir noktadan yayılan renk geçişini sağlar.
Radial 1
style="background:radial-gradient(red,yellow);height:250px;"
Orta noktası yani başlangıç rengi kırmızı olup sarıya doğru etrafına yayılan bir kod.
Radial 2
style="background:radial-gradient(circle,red,green,yellow);height:250px;"
Bu div için üç renkten oluşan bir gradient kullanılmıştır. Başlangıç rengi kırmızı olmak üzere yeşil vee sarı olarak yayılmıştır. Bir ayrıntı olarak radial gradient'ler varsayılan olarak elips şekil döndürür. circle parametresi ile bir daire şeklinde geri dönüşü yapar.
Radial 3
style="background:repeating-radial-gradient(red 5%,green,yellow 10%);height:250px;"
Linear gradient'te olduğu gibi radial-gradient'in repeating özelliği de bulunur.
Radial 4
style="background: radial-gradient(red,green,yellow); height: 250px;"
Bu div ise elips şeklinde radial gradient oluşmuştur.
Yorumlar
Yorum Gönder