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

4

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

CSS gradients özelliği bütün tarayıcılarda nasıl kullanılır?

 

ergin ergin (2539)
10 yıl önce sordu

  • Guzelbi soru hakan 10 yıl önce

Toplam 2 Cevap


2

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-gradientekli 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>

 

 

 

ergin ergin (2539)
10 yıl önce cevaplandı

    2

    Şu araçta etkili olabilir http://www.colorzilla.com/gradient-editor/

    mujdatsayar mujdatsayar (57)
    10 yıl önce cevaplandı

      üyelik gerektirir

      Cevap yazabilmek için üye girişi yapmalısınız.

      Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
      uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol