CSS3 ile Gradyan (Gradient) Arkaplan Oluşturma

Geçişli arkaplan renkleri CSS3 ile gelen güzel özelliklerden birtanesidir. Daha önce resim olarak ayarladığımız gradyan arkaplanlar artık CSS ile kolayca yapılabiliyor. Hem sayfanız resim yüklemek için uğraşmıyor hemde kolayca renklerde düzenleme yapabileceğiniz bir imkan sağlanıyor.

Bunun için çeşitli ‘Generator’ web siteleri mevcut. Örneğin ‘Ultimate CSS Gradient Generator‘ adresini ziyaret ediyoruz ve burada arka plan renklerini ayarlıyoruz. Bunun dışında gradyan yön ve ölçülerinide ayarlamanız mümkün.

Sonrasında yapmanız gereken .CSS dosyanızda ID yada CLASS tanımınıza aşağıdaki oluşan kodları yapıştırmak.

background: #1e5799; /* Eski Tarayıcılar */

background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

Ayrıca bazı tarayıcılarda da doğru çalışabilemsi için aşağıda ki kodu HTML sayfanızda < head > < / head > tagları arasına yapıştırıyoruz.

<!--[ if gte IE 9 ]>
  <style type='text/css'>
    .gradient{
       filter: none;
    }
  </style>
<![endif]-->