CSS gradients (Renk Geçişleri) nasıl kullanılır?

CSS ile renk geçişi CSS3 ile birlikte gelen güzel bir özelliktir. Resim kullanmadan bir renkten diğerine geçiş yapmayı sağlayan CSS3 gradients özelliği tasarımsal olarak büyük bir ayrıcalık sağlamaktadır. Ayrıca resim kullanılmadığı için HTTP isteği yapmamış oluruz ve böylelikle hız kazanmış oluruz. CSS3’ün bu özelliği ile resim yerini kod blokları alır ve buda bize hız kazandırır.

CSS3 renk geçişi iki türdür. Doğrusal(Linear) ve Radyal(Radial) şimdi bu çeşitleri inceleyelim;

Doğrusal(Linear) Renk Geçişleri

Doğrusal renk geçişleri yukarıdan aşağı, soldan sağa veya istediğimiz doğrusal yönler arası geçiş yapmamızı sağlar. CSS3 renk geçişinin dezavantajlarından birisi farklı tarayıcılar için farklı kod yazma gereksinimidir.

Genel kullanımı

linear-gradient(başlangıç noktası, başlangıç rengi, bitiş rengi);

Tüm tarayıcılar tarafından desteklenecek şekilde bir örnek vermek gerekirse;

#DogrusalRenkGecisi{
    background: -moz-linear-gradient(top,#333333, #999999); /* FF3.6+ */
    background: -webkit-linear-gradient(top,#333333,#999999); /*Saf5.1+,Chr10+ */
    background: -o-linear-gradient(top,#333333,#999999); /* Opera11.10+ */
    background: -ms-linear-gradient(top,#333333,#999999); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top,#333333,#999999); /* W3C */
    
    width:300px;
    height:150px;
}

<div id="DogrusalRenkGecisi">

</div>

 Radyal(Radial) Renk Geçişleri

Radyal renk geçişi ise, merkezi bir noktadan tüm yönlere renk geçişi olarak tanımlanabilir. Radyal renk geçişi bize özel şekil (daire ve elips) oluşturma imkanı verir. İnternet Explorer 10 öncesi sürümü hariç desteklemediği için uygulanabilirliği azdır.

Genel Kullanımı

radial-gradient(şekli uygulama alanı, başlangıç rengi, bitiş rengi);

Örnek üzerinde kullanımı ise şu şekildedir.

#RadyanRenkliGecis {   
    background-image: -moz-radial-gradient(circle farthes-side, #333333, #999999); /* FF3.6+ */
    background-image: -webkit-radial-gradient(circle farthest-side, #333333, #999999); /* Safari5.1+, Chrome10+ */
    background-image: -webkit-gradient(radial, center center, 0, center center, 95, from(#333333), to(#999999)); /* Chrome,Safari4+ */
    background-image: -ms-radial-gradient(circle farthest-side, #333333, #999999); /* İE 10 */
    background-image: radial-gradient(circle farthest-side, #333333, #999999); /* W3C */ 
    
    width:300px;
    height:150px;
} 

<div id="RadyanRenkliGecis"> 
</div>