CSS'de Gradients Yapımı

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);
}

# 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));
}

# 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.

#box{
  background-image: radial-gradient(red, green, blue);
}

Yukarıdaki örnek, eşit aralıklı renklere sahip bir radyal renk geçişini gösterir:

# 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.

#box{
  background-image: conic-gradient(red, blue);
}