CSS3 | Efek Gradient Pada Blog

Sepertinya posting kali ini menarik, kenapa? karena tentang CSS3 lagi hahaha. Kali ini tentang cara membuat Efek Gradient Pada Blog. Iyap, sekarang gradient saja sudah bisa di buat dengan CSS, betapa majunya teknologi sekarang. Nah tanpa basa basi dan agar tidak terlalu panjang dan lebar langsung saja ke Step.By.Step!!!

Kode CSS yang di gunakan untuk efek gradient adalah seperti ini

background: #ffa45a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');
background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));
background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);

Berikut keterangan kode di atas :

background: #ffa45a;
warna background yang akan muncul apabila browser tidak mendukung

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');
merupakan kode efek gradiasi untuk browser IE. StartColorstr='#ffa45a' adalah warna awal gradiasi dan endColorstr='#ba5b0d' adalah warna akhir gradiasi

background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));
merupakan kode efek gradiasi untuk browser webkit seperti Safari, Google Chrome, dll. Linear adalah tipe gradiasi. Anda dapat mengganti dengan Radial, Angle, dll. From(#ffa45a) adalah warna awal gradiasi dan to(#ba5b0d) adalah warna akhir gradiasi.

background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);
merupakan kode efek gradiasi untuk browser Firefox v3.6 keatas. Linear adalah tipe gradiasi anda mengganti dengan Radial, Angle, dll. #ffa45a adalah warna awal gradiasi dan #ba5b0d adalah warna akhir gradiasi.

Untuk peletakan anda bisa memasukannya ke dalam tag CSS anda. Misalnya untuk background blog anda, maka kode yang haru di cari adalah body {. Cara meletakan

body {

background: #ffa45a;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');

background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));

background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);

}

Untuk DEMO
Sekian posting dari saya kali ini, saya akhiri wassalam