Cara Membuat Efek Gradasi di Blog

Posted by Tips Trick Blogger Thursday, January 27, 2011 0 comments

Kali ini ane berbagi tentang bagaimana membuat efek gradasi untuk beberapa kolom template anda. Gradasi ini akan terlihat di dalam kotak, sebagai contoh anda bisa lihat pada bagian sidebar blog ini...jjiieeaah promosi dulu gan...hehee :). Namun anda juga dapat menambahkan efek gradasi pada bagian lain di blog anda. Fitur ini sudah mendukung sebagian besar browser seperti IE, Safari, Firefox (versi 3.6 keatas), dan Google Chrome.Ok langsung saja kita bredel bagaimana caranya.
Kode CSS3 efek gradiasi:

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

Keterangan:

background: #ffa45a; /* warna background dasar yang akan muncul apabila browser tidak mendukung */
filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#FFF', endColorstr='#81BEF7'); /* efek gradasi untuk browser IE dan #FFF warna awal (atas) efek gradasi, #81BEF7 warna akhir (bawah) efek gradasi) */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#81BEF7)); /* kode efek gradiasi untuk browser Safari, Google Chrome, dll. Linear adalah tipe gradiasi. Anda dapat mengganti dengan Radial, Angle, dll. (#FFF) adalah warna awal (atas) efek gradiasi, to(#81BEF7) adalah warna akhir (bawah) efek 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. #FFF adalah warna awal (atas) efek gradiasi dan #81BEF7 adalah warna akhir (bawah) efek gradiasi */

Cara peletakan kode
Ganti property background pada template blog anda yang ingin dipasang efek gradiasi. Sebagai contoh anda ingin memasang efek gradiasi di bagian menu navigasi maka cari kode css untuk menu navigasi di template blog anda. Contohnya:

.sidebar .widget{
background: #FFF url(http://lh3.ggpht.com/15FopxVONSo/nav-bg.gif) left repeat-x;
height:35px;
margin-left:10px;
margin-right:10px;
}

Ganti teks berwarna merah dengan kode efek gradiasi sehingga hasilnya menjadi seperti ini.

.sidebar .widget{
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);
height:35px;
margin-left:10px;
margin-right:10px;
}

Kode berwarna hijau (url(http://lh3.ggpht.com/15FopxVONSo/nav-bg.gif) left repeat-x;) delet aja.
Sebenarnya masih banyak efek gradasi untuk mengembangkan efek gradasi yang ada di sini agar lebih variatif. Salah satu contohnya adalah seperti kode di bawah ini.

background: #FFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF', endColorstr='#FAAC58');
background: -webkit-gradient(linear, right top, right bottom, from(FFF), to(#FAAC58));
background: -moz-linear-gradient(top, #FFF, #FAAC58); /* bedanya hanya pada warna biru yang tadinya left top, left bottom menjadi right top, right bottom. */