Merhaba,

Web sayfamızın görselliğini artırmak için CSS’in bir çok özelliğinden faydalanırız. Renk geçişleri yani CSS gradients, görselliğimizi ve kullanım deneyimini yükseltmekte bize çok yardımcı olacaktır.

2 tip renk geçiş tipimiz mevcuttur:

  • linear: renkler bir noktadan diğerine düz bir çizgide gider.
  • radials: renkler bir dairenin merkezinden kenarlarına, her yöne gider.

Renk geçişleri arka plan görüntüsü olarak kabul edilir ve buna uygun olarak kullanılmalıdır.

linear-gradient

linear-gradient söz dizimi oldukça karmaşıktır, ancak temel olarak aşağıdakileri tanımlamaktır:

  • hangi renkleri kullanmak istiyorsunuz
  • bu renklerin eksen boyunca görünmesi gereken (başlangıç, orta, bitiş vb.) noktaları
  • renk geçişinin hangi yöne gitmesi gerektiği

2 renkli bir geçiş ile örnekleyelim:

HTML:

<div>Örnek dikey arkaplan renk geçişi.</div>

CSS:

div{ background-image: linear-gradient(red, blue); }

Görünümü:

Varsayılan olarak:

  • yönü dikeydir, yukarıdan aşağıya
  • ilk renk başlangıçtadır (üstte)
  • ikinci renk sondadır (altta)

Yön değiştirme

Yukarıdan aşağıya yönünde size uymuyorsa, aşağıdakilerden birini kullanarak değiştirebilirsiniz:

  • to left top gibi anahtar kelimelerle gradient yönünü tanımlama
  • 45 deg gibi belirli bir açının tanımlanması

Bu yön tanımlamaları renk seçimlerinden önce yapılmalıdır. Bir önceki örnekteki HTML kodumuzun CSS’ini değiştirelim:

div{ background-image: linear-gradient(to bottom right, yellow, purple); width: 200px; }

Görünümü:

Burada to bottom right kullanarak renk geçişimizi, standart olan başlangıç noktasından (sol üst), sağ – alt noktaya doğru yönlenmesini sağladık.

Daha spesifik bir yön belirtmek için de açıları kullanabiliriz:

  • 0degvarsayılan değerdir. yukarıdan aşağıya yönde etki eder.
  • 20degbiraz çapraz şekilde,saat yönünde 20 derece açı yönünde etki eder.
  • 90degsağdan sola doğru yönde etki eder.
  • 180degalttan üste doğru etki eder.

CSS kodumuzu tekrar  güncelleyelim:

div{ background-image: linear-gradient(20deg, green, blue); width: 150px; }

Daha fazla renk ekleme

İstediğiniz kadar renk ekleyebilirsiniz. Eklediğiniz her renk eksenler boyunca eşit olarak dağıtılır:

  • 2 renk: %0 ve %100 aralığında
  • 3 renk: %0 , %50 ve %100 aralıklarında
  • 4 renk: %0 , %33, %67 ve %100 aralıklarında.

Örnek kodumuzun CSS’ini tekrar güncelleyelim:

div{ background-image: linear-gradient(orange, grey, yellow); width: 150px; }

Görünümü:

Belirli renk duraklarını ayarlama

Renklerin eşit olarak dağıtılmasını istemiyorsanız, yüzdelerini veya piksel değerlerini kullanarak belirli renk durdurma konumları ayarlayabilirsiniz. CSS’imizi tekrar güncelliyoruz:

div{ background-image: linear-gradient(orange, grey 10%, yellow 50%); width: 150px; }

Görünümü:

Burada;

  • orange rengimizin durma konumu yoktur, bu nedenle varsayılan değeri 0’dır (0%).
  • grey üste daha yakın, %10’dan %50’ye doğru gider.
  • yellow ise renk geçişinin yarısını kaplar, %50’den %100’e doğru gider.

radial-gradient

linear-gradient özelliğimiz tek hatlı bir ekseni takip eder. radial-gradient ise her yöne yayılır. Söz dizimleri birbirine benzerlik gösterir. Fakat bir yön belirtmek yerine şunları belirtmek gerekir;

  • şeklini: bir daire veya bir elips
  • başlangıç noktası: dairenin / elipsin merkezi olacak
  • bitiş noktası: dairenin / elips kenarının olacağı yer
<div>Bir güneşe benziyor değil mi?</div>

CSS:

div{ background-image: radial-gradient(red, yellow); padding: 1rem; width: 300px; }

Görünümü:

Varsayılan olarak:

  • renk geçişi elips şeklindedir
  • ilk renk merkezden başlar
  • son renk en uzak köşede biter

başlangıç pozisyonu

Başlangıç pozisyonları arkaplan pozisyonlarına benzer. at belirteci ile tanımlanır.

div{ background-image: radial-gradient(at top right, black, lightgrey); padding: 1rem; width: 300px; }

Görünümü:

bitiş pozisyonu

Varsayılan olarak en uzak köşede biter fakat siz şunlardan  birini seçebilirsiniz;

  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner

Farkı kavramak ve görselleştirmek zor, bu yüzden ayrıntılara girmiyoruz. Mozilla web sitesinde farklılıkları ile ilgili güzel bir açıklama bulabilirsiniz.

div{ background-image: radial-gradient(closest-corner at 20px 20px, green, blue); padding: 1rem; width: 300px;}
div:hover{ background-image: radial-gradient(farthest-side at 20px 20px, green, blue) }

Görünümü:

sabit boyut

Hem başlangıç hem de bitiş konumlarını ayarlamak yerine, yalnızca belirli boyutları ayarlayabilirsiniz:

div{ background-image: radial-gradient(20px 10px at 75% 50%, darkviolet, pink); padding: 1rem; width: 300px; }

Görünümü:

CSS renk geçişlerinde sonsuz çeşitlilik vardır. Burada kullandığımız örnekler oldukça çirkin görünse de yalnızca sizlere özelliklerin ne işe yaradığını gösterebilmek içindir. 

Ancak, özellikle sayfalarımızda kullanacağımız düğmeler için daha güzel geçişler gösterebiliriz:

<a href="#" class="button-grey">Gri Düğme</a>
<a href="#" class="button-yellow">Sarı Düğme</a>
<a href="#" class="button-orange">Turuncu Düğme</a>
<a href="#" class="button-red">Kırmızı Düğme</a>
<a href="#" class="button-purple">Pembe Düğme</a>
<a href="#" class="button-blue">Mavi Düğme</a>
<a href="#" class="button-green">Yeşil Düğme</a>

CSS:

a {
    background-image: linear-gradient(lightblue, skyblue);
    border: 1px solid #bfbfbf;
    border-radius: 3px;
    color: grey;
    display: inline-block;
    line-height: 32px;
    padding: 0 15px;
    text-decoration: none;
    transition: none;
    vertical-align: top;
    box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.button-grey  { background-image: linear-gradient(#f2f2f2, #f2f2f2); }
.button-yellow{ background-image: linear-gradient(#fce374, #fcdf5b); }
.button-orange{ background-image: linear-gradient(#f58a38, #f57c20); color:white;}
.button-red   { background-image: linear-gradient(#ed6d64, #ed574c); color:white;}
.button-purple{ background-image: linear-gradient(#847bba, #7568ba); color:white;}
.button-blue  { background-image: linear-gradient(#42b0e3, #2ba9e3); color:white;}
.button-green { background-image: linear-gradient(#97cc76, #8bcc62); color:white;}

Görünümü:

*** Örneğimizde gradient dışında da öğeler kullandık.