CSS GEÇİŞLİ ARKA PLAN RENGİ (GRADIENT)

Merhaba..

CSS ile düz arka plan renkleri yada resimleri uygularken , dilersek GRADIENT adı verilen renk geçişleri elde edebilriiz. Geçişli renkler için background-color değil background-image özelliğini kullanıyoruz..

GRADIENT

Gradient birden fazla rengin birbirine tam olarak karışmadan , geçişli görünüm oluşturmasıdır.  Css'te

• Linear (Doğrusal) Gradient   
• Radial (Açısal) Gradient  
• Conic (Konik) Gradient   

olmak üzere 3 farklı tipte GRADIENT geçiş uygulanabiliyor.  Ben bu yazıda en çok kullandığım LINEAR GRADIENT'i anlatmaya çalışacağım.

LINEAR (DOĞRUSAL) GRADIENT

Doğrusal renk geçişlerinde , renkler soldan sağa yada tersi veya üstten alta yada tersi şekilde birbirlerine karışırlar. Yön belirtmediğimiz zaman varsayılan geçiş yukarıdan aşağıyadır (to bottom). Yani ilk yazılan renk üstten başlayacak şekilde diğer renkler sırayla aşağıya doğru karışırlar...

ÖRNEK

  background-image: linear-gradient( lightblue,darkblue );

YÖN BELİRTMEK

Linear Renk geçişlerinde  varsayılan yön , yukarıdan aşağıyadır. Bununla beraber farklı yönler belirtebiiriz;

1. to bottom : Yukarıdan Aşağıya doğru (varsayılan),
2. to top: Aşağıdan Yukarıya doğru,
3. to left: Sağdan Sola doğru,
4. to right: Soldan Sağa doğru.

Bunların dışında ikinci bir yön daha belriterek diagonal karışım sağlayabilriiz , örneğin;

• to bottom right : Aşağı sağa doğru (sağ alt köşe)
• to bottom left:  Aşağı sola doğru, (sol alt köşe)
• to top right : Yukarı sağa doğru (sağ üst köşe)
• to top left:  Yukarı sola doğru (sol üst köşe)

Renk geçişlerine, geçiş yönü eklemek için linear-gradient parantezinde renklerden önce istediğimiz yönü yazmalıyız..

ÖRNEKLER

/* to bottom (aşağıya doğru - varsayılan) */
 background-image: linear-gradient(to bottom, lightblue,darkblue );

/* to top  (yukarıya doğru) */
  background-image: linear-gradient(to top, lightblue,darkblue );

/* to left (sola doğru) */
  background-image: linear-gradient(to left, lightblue,darkblue );

/* to right (sağa doğru) */
  background-image: linear-gradient(to right, lightblue,darkblue ); 

Yukarıdaki örneklerde ilk renk  LIGHTBLUE (açık mavi) olduğu için renk geçişi yazılan yöne göre açık maviden -  koyu maviye (DARKBLUE) doğru olacakır.

KARIŞIM YÖN DERECESİ 

Linear Renk geçişlerinde dilersek 0-360 arasında derece seçerek karışıımın yönünü değiştirebiliriz. 0 varsayılan değerdiri ve to bottom ile eşdeğerdir. Sol alt köşeyi 0 orijin noktası olarak kabul edersek her açı değerinde bu noktaya göre karışım yönü dönecektir..

1. 0deg = to bottom : aşağıya doğru (varsayılan),
2. 90deg = to right: sağa doğru,
3. -90deg = to  right: sola doğru.
4. 180deg = to left: yukarıya  doğru,

Dereceyi uygulamak için , gradient parantezinde renklerden önce derece değeri "deg" birimi ile yazılır...

ÖRNEK

  background-image: linear-gradient(90deg, lightblue, darkblue );

KARIŞIM RENK YÜZDESİ - MİKTARI

Linear Renk geçişlerinde renklerin karışımdaki miktarlarıı yüzde yada piksel cinsinden belirtebiliriz. Renk miktarı gradient parantezinde rengin hemen yanında yazılır. Yüzdeli değrlerde her iki renk içinde miktar belirlendiğinde ,  renk geçiş özelliği kaybolacaktır. 

ÖRNEK %

  background-image: linear-gradient( to right, lightblue 50%, darkblue 50% );

Yukarıda her iki rengede yüzde miktarı uygulandığuı için geçiş özelliği kayboldu..

ÖRNEK %

  background-image: linear-gradient( to right, lightblue 40%, darkblue );

Yukarıda sadece açık mavi rengine yüzde miktarı uygulandığuı için renk geçişi oluştu..

ÖRNEK PX

  background-image: linear-gradient( to right, lightblue 300px, darkblue 100px );

DAHA FAZLA RENK

Linear Renk geçişlerinde  sadece 2 değil, itediğimz kadar enk belirtebiliriz. ÖRneğin aşağıda TURUNCU - SİYAH - KIRMIZI Geçişli rengini görebilirsiniz..Yön belirtilmediği için karışım yukarıdan aşağıya doğru olur...

ÖRNEK

  background-image: linear-gradient( orange,black,red );

TRANSPARAN RENK 

Linear Renk geçişlerine renklerin tansparanlığını (opaklık)  da ekleyebiliriz. Tabi Opaklık değeri ekleyebilmek için renk kodlarını kullanmamız gerekiyor..

ÖRNEK

  background-image: linear-gradient( rgba(0,0,160,0) , rgba(0,0,160,1) );

Yukarıda ilk renk tamamen transparan mavi  rgba(0,0,160,0) iken 2. renk tamamen görünür mavi rgba(0,0,160,1) olarak belirlenmiş. Dolayısıyla renk geçişi, transparandan maviye doğru ve yön belirtilmediği içn yukarıdan aşağıya doğru olur...

Görüşmek üzere...