CSS3 Gradient Kullanımı

CSS3’ün gelişi ile birlikte işimizi kolaylaştıran en önemli özelliklerden biri de hiç kuşkusuz genellikle arkaplanlar için kullanılan renk geçişi (gradient) kullanımıdır. CSS3 ile birlikte sadece arkaplanlar için değil başta butonlar ve yazılar olmak üzere daha bir çok nesne için de bu özellik kullanılabiliyor. Böylece hem fazladan resim dosyası kullanmamış oluyoruz hem de retina ekranlar için kolaylık sağlamış oluyoruz. Üzücü olan, İnternet Explorer 9 ve önceki sürümlerinde ne yazık ki gradient desteği yok fakat diğer tarayıcılar için ve İnternet Explorer 9 ‘dan sonraki sürümler için herhangi bir sorun yok.

CSS3 Linear Gradient

İlk olarak linear gradient kodlarının nasıl kullanıldığına aşağıdan göz atalım:

background:linear-gradient(yön, renk1 , renk2, ...);

Burada yön değeri girilmezse varsayılan olarak “top to bottom” yani yukarıdan aşağı değerini alacaktır. renk1 ve renk2 kısımları ise geçiş yapılacak renk kodlarını belirtmek için kullanılmaktadır. İstediğiniz kadar geçiş yaptırabilirsiniz. Örnek olarak aşağıdaki kullanıma bakabilirsiniz:

linear gradient 1
background: -webkit-linear-gradient(red, yellow, blue, green); /* Safari 5.1 - 6.0 için */
background: -o-linear-gradient(red, yellow, blue, green); /* Opera 11.1 - 12.0 için */
background: -moz-linear-gradient(red, yellow, blue, green); /* Firefox 3.6 - 15 için */
background: linear-gradient(red, yellow, blue, green); /* Standard Kullanım */

Burada eski ve yeni tüm tarayıcılarda çalışması için gerekli kodlar verilmiştir daha sonraki örnekler standart kullanım üzerinden yapılacaktır, dilerseniz diğer tarayıcı desteklerini de örnekteki gibi ekleyebilirsiniz.

linear gradient 2
background: linear-gradient(to bottom, #0498db , #2980b9);

Bu örnekte de gradient buton yapımını görebilirsiniz.

linear gradient 3
background: linear-gradient(-45deg, red, yellow, red);

Buradaki örnekte gösterilmeye çalışılan ise dereceli bir gradient oluşturabildiğinizdir. Örnekte -45 derece açıyla renk geçişi sağlanmıştır.

Son olarak da tekrar eden gradient kullanımını görelim.

linear gradient 4
background:repeating-linear-gradient(-90deg, #2ecc71, #2ecc71 5px, white 5px, white 10px);
 

CSS3 Radial Gradient

Radial gradient kullanmak için ise aşağıdaki örneklere göz atabilirsiniz.

radial gradient 1
background: radial-gradient(#f39c12, #8e44ad, #2c3e50);

radial gradient 2
background: radial-gradient(red 5%, yellow 25%, green 50%);

radial gradient 3
background-image: -webkit-radial-gradient(50px 50px, circle closest-corner, #f39c12, black);

radial gradient 4
background:repeating-radial-gradient(#e74c3c, #e74c3c 5px, white 5px, white 10px);

CSS kullanılarak renk geçişi nasıl yapılır ve CSS ile linear ve radial gradient nasıl yapılır öğrenmiş oldunuz. Buradaki CSS3 gradient örneklerinden yola çıkarak çok farklı kullanımlar elde edebilirsiniz. Online CSS3 gradient oluşturucu 2 web site var aklımda, dilerseniz bunları da kullanabilirsiniz.
 
Kaynaklar:

26.05.2014 CSS Yorum yapılmamış

, , , , , ,

Yorum yapılmamış

Yorum Yazın

kod.gen.tr