Cara Membuat Efek Gradiasi Dengan CSS3

 Kali ini saya akan menjelaskan tentang Cara Membuat Efek Gradiasi Dengan CSS3 (fitur dari CSS3 yaitu efek gradiasi)
Dengan menggunakan fitur ini sobat dapat membuat efek gradiasi hanya dengan menambahkan sedikit kode CSS pada Template Blog sobat.

Berikut kode CSS3 untuk membuat efek gradiasi :

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);

Keterangan :
background: #ffa45a;
merupakan 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
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
#ba5b0d adalah warna akhir gradiasi.
 
Ganti property background pada template blog sobat yang ingin dipasang efek gradiasi
Sobat juga bisa membuat efek gradiasi yang lebih bervariasi dengan menggunakan link dari CSS3 Gradient Generator

Berikut cara penerapan kode gradiasi di blog

Sebagai contohnya sobat ingin memasang efek gradiasi di bagian NavbarMenu

Login ke Blogger
Klik Rancangan → Edit HTML
Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget
carilah kode seperti berikut :

#NavbarMenu {
background: #555 url(http://i1002.photobucket.com/albums/af149/Imtikhan/navbar.png);
width: 960px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
}

Ganti kodeyang berwarna biru dengan kode efek gradiasi sehingga hasilnya menjadi seperti berikut :

#NavbarMenu {
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);
width: 960px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
}

jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba