Linear-Gradient

Linear-Gradient

Çizgisel degrade uygulanmak istendiğinde bu özellik kullanılır. Bu özellik sayesinde %(yüzde) degrade verme imkanı var. Bu özelliğin de birçok CSS3 özelliğinde olduğu gibi browser’larda da farklı kullanım şekli vardır.

-Webkit-Gradient

Degrade verirken Chrome ve Safari tarayıcıları için kullanım şekli aşağıda verdiğim örnek gibidir.

Kullanımı

<style type="type/css">

body{

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000))

}

</style>

Yukarıda vermiş olduğum kod blogunda öncelikle verilmek istenen degrade şekli belirleniyor. linear (çizgisel) olduğunun tanımlanmasından sonra yön belirtiliyor sol üst köşeden, sol alt köşeye doğru bu dikey degrade uygulanacağı anlamına geliyor. Sonrada hangi renkler arası geçiş olacaksa şu renkten şu renge doğru şeklinde tanımlaması yapılıyor.

İPUCU!

Aynı şekilde sizde yatay degrade vermek isterseniz  left top ve right top şeklinde tanımlama yapabilirsiniz. Ya da left bottom ve right bottom da yazabilirsiniz. Kısaca istediğiniz degrade yönünü belirtebilirsiniz. Tabiki abartmamak gerek 🙂

Kullanımı

<style type="text/css">

html{width:100%; height:100%; margin:0; padding:0;}

body{

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#000));

margin:0; padding:0;

height:auto; width:auto;

}

</style>

Yukarıdaki kod blogunda seayfanın arkaplanına degrade verdik. Görüldüğü gibi istediğiniz şekilde yüzde değerleri vermek degradenin yönünü belirlemek mümkün.

İPUCU!

Burada dikkat edilmesi gereken nokta html ve body etiketi için width, height, padding ve margin değerlerinin atanması. Bunu yapmamızın sebebi browser’larda html ve body etiketleri bazen tam sayfa olarak tüm browser’larda yorumlanabilimesi için CSS kodunu yazıyoruz.

 

-Moz-Linear-Gradient

Çizgisel degrade (linear gradient) vermek için firefox’ta kullanıla prafix ekidir.

Kullanımı

<style type="text/css">

html{width:100%; height:100%; margin:0; padding:0;}

body{

background: -moz-linear-gradient(top, #fff 75%, #000);

margin:0; padding:0;

height:auto; width:auto;

}

</style>

Firefox’ta degradenin hangi yönde olacağını belirliyoruz. Kullanımı webkit-fremawork’ünden daha kolaydır. Aynı şekilde bunuda %(yüzde) vererek istediniz yönde istediğiniz oranda degrade vermek mümkün.

Kullanımı

<style type="text/css">

html{width:100%; height:100%; margin:0; padding:0;}

body{

background: -moz-linear-gradient(top, #fff 75%, #000 100%);

margin:0; padding:0;

height:auto; width:auto;

}

</style>

Yukarıdaki kod blogunda dadegradenin yönünü belirliyoruz ve hangi rengin hangi oranda, hangi renge, yine hangi oranda degrade uygulanacağını belirliyoruz.

IE8 öncesi sürümlerde gradient uygulanamıyordu. Aslında bakılırsa IE8+ versiyonlarda da kullanılmıyor. Ancak IE tarafında bunun karşılayan filter özelliğidir.

<style type="text/css">

html{width:100%; height:100%; margin:0; padding:0;}

body{

filter: progidDXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#000');

margin:0; padding:0;

height:auto; width:auto;

}

</style>

NOT!

IE tarafından filter özelliği transparan yapmakta, gölge vermekte de kullanılmaktadır. Ancak ben bunların üzerinde durmuyorum. Sadece filter özelliğini göstermek için kullandım.