CSS3 ile birlikte gelen önemli özelliklerden biri de Gradient yani Renk Geçişleri… CSS3 öncesi renk geçişleri background-image ile yapılıyordu. CSS3 sonrasında ise yine background-image ile yapılıyor :). Önceden renk geçişini resim dosyasına kaydedip background-image: url(‘resim.jpg’) şeklinde çağırarak kullanmak gerekirken, artık CSS ile ifade edebiliyoruz. Gerisi web tarayıcımıza kalmış. Web tarayıcımız desteklediği sürece örneğin bir linkin arkaplan renginin yeşilden maviye geçiş yapmasını istiyorsak W3C (World Wide Web Consortium)’un standartlarına göre şu kodu kullanmamız gerekiyor;
a {
background-image: linear-gradient(to bottom, #00FF00 0%, #0000FF 100%);
}
Kodu parça parça incelediğimiz zaman linear-gradient’i içindeki parametrelere göre doğrusal renk geçişi resmi üreten bir fonksiyon olarak düşünebiliriz. İlk parametremiz geçişin nereye yapılacağını gösteriyor ve örnekte “alta doğru” dedik. “to bottom right”, “to bottom left”, “to top”, “to top left”, “to top right”, “to left”, “to right” gibi seçeneklerimiz de mevcut. Bundan sonraki parametreler ise renk kodları ve renk merkezlerinin yüzdelik değerleri. Yani örnekte “%0 başlangıç noktasında yeşilden, %100 bitiş noktasında maviye doğru bir geçiş olsun” demek istedik. Şu adresten örneğimizi inceleyebilirsiniz. Eğer siz de benim gördüğümü görüyorsanız karşınıza şöyle bir şey çıkacaktır;
Eğer renk geçişi yoksa tarayıcınız renk geçişini desteklemiyor demektir. Sayfanızı renk geçişi desteklemeyen tarayıcıların da görüntüleyebileceğini düşünerek uygun bir sabit renk de kullanmanız yararınıza olacaktır.
a {
background-color: #008888; /* desteklemeyen tarayıcılar için sabit renk */
background-image: linear-gradient(to bottom, #00FF00 0%, #0000FF 100%);
}
Peki renk geçişlerini hangi tarayıcılar destekliyor? Mozilla Firefox, Google Chrome, Opera ve Internet Explorer 10 desteklerken, Safari ve Internet Explorer’ın 9 ve alt sürümleri desteklemiyor.
Şu ana kadar linear gradient yani doğrusal renk geçişlerinden bahsettik. Dairesel ve elips şeklinde de renk geçişleri oluşturabiliriz. Bunun için kullanacağımız radial-gradient kullanıyoruz;
a {
background-image: radial-gradient(circle farthest-corner at center, #00FF00 0%, #0000FF 100%);
}
Örneği buradan inceleyebilirsiniz.
Gördüğünüz gibi renk parametreleri ilk örnektekinin aynısı. İlk parametreye gelince “circle” dairesel geçiş yaptığımızı gösteriyor. Bu kısma “ellipse” olarak değiştirdiğimizde geçiş eliptik olacaktır. “farthest-corner” yani “en uzak köşe” dairesel renk geçişinin nereye kadar olacağını belirttik. Bu kısmı “farthest-side”, “closest-corner” ve “closest-side” olarak değiştirebiliriz. at ifadesinden sonraki “center” kısmı daire ve elips merkezini ifade ediyor ve örneğimizde elemanımızın orta noktasına daire merkezini yerleştirmiş olduk. Daire ve elips merkezi olarak “left top”, “center top”, “right top”, “left center”, “right center”, “left bottom”, “center bottom” ve “right bottom” kullanılabilir. Bununla ilgili bir örnek daha yapabiliriz;
Merkezi HTML elemanımızın “alt merkez”i olan “sarı” renkten başlayarak “%25e kadar” “sarı” olan “%30a kadar” “mavi” ve bitişe kadar “mavi” olan bir renk geçişi yapalım. Aslında kısaca “doğan güneş” çizelim diyebiliriz. Bu doğan güneşin kodu şu şekilde olacaktır;
background-image: radial-gradient(circle farthest-corner at bottom center, #FFFF00 0%, #FFFF00 25%, #0000FF 30%, #0000FF 100%);
height: 200px;
Örneği buradan inceleyebilirsiniz. Daha canlı örnek için Microsoft’un CSS Gradient Background Maker uygulamasını inceleyebilir, farklı tarayıcılarla uyumlu kodları elde edebilirsiniz…
aikutto 
Yorum bırakın