Tuğsan ÜNLÜ | Blog

CSS3 ile gelen yeni özellikler sayesinde grafik uygulamları ile yaptığımız işlemleri CSS3 ile kod yazarak da yapabiliyoruz. Bunlardan birisi de gradyan efekti. Yani bir grafiğin üstünde bir renkten başka bir renge geçiş uygulamak. Bu işlemi yapabilmek için grafiğin renk geçişlerini yapacağımız koordinatlarını bilmemiz gerekiyor. Grafiğin tek tek her pikselini kontrol edemeyeceğimiz için gradyan oluşturmak için birkaç web sitesi hazırlanmış. Benim en basit ve anlaşılır bulduğum CSS3 Gradient Generator. İstediğimiz kadar parçaya bölebileceğimiz grafiğin üzerinde renk seçici ile geçiş renkleri seçilirken gradyanın ön izlemesi gösteriliyor ve oluşturacağımız kodlar oluşturuluyor. Renk kodlarını RGB veya Hexadecimal olarak alınabiliyor.

Ayrıca robertnyman.com’da bulunan döküman ile tüm tarayıcılarda çalışan gradyan uygulamasının nasıl yapılacağı belirtilmiş.

<style>
      #gradyan{
              color: #fff;
              height: 100px;
              padding: 10px;
/* Safari ve Google Chrome için */
              background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
/* Firefox için */
              background: -moz-linear-gradient(top, #00f, #fff);
/* Internet Explorer 5.5/7 için */
              filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
/* Internet Explorer 8 için */
              -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
           }
</style>

<div id="gradyan"></div>