Membuat Gradiasi Warna Linear Background

Sering kita melihat berbagai macam efek yang dihasilkan dari suatu program pengolah gambar seperti Photoshop, Corel Draw, dan sebagainya. Salah satu fitur yang banyak digunakan adalah gradiasi. Contoh dari penggunaannya adalah terhadap pembuatan sebuah background, logo, banner, spanduk dan lainnya.

Bukan hanya digunakan pada kegiatan sehari-hari, untuk anda seorang designer tentu membuat tampilan situs atau blog yang rapih sudah merupakan hal yang harus dipenuhi. Dengan menggunakan efek ini, kita tidak perlu membuat sebuah background dengan gambar, tetapi hanya dengan mengedit kode CSS yang berlaku pada elemen Web tersebut.

Tampilan suatu situs/blog akan sangat mempengaruhi kegiatan penjelajahan yang dilakukan oleh pengunjung. Semakin bagus design serta model yang digunakan, akan semakin disukai pengunjung.

Setelah pada tutorial sebelumnya kita mengetahui dan mempelajari Cara Mengganti Background Blog dengan Gambar, sekarang membahas ke topik berikutnya mengenai editing gradient efek. Berikut ini adalah panduan / tutorial praktis yang dapat membantu anda membuat sebuah paduan warna baik itu linear, radial, angel, oval, horizontal, vertical dengan mudah.

Fitur ini sudah mendukung sebagian besar browser seperti IE, Safari, Firefox (versi 3.6 keatas), Opera dan Google Chrome. Berikut adalah kode CSS3 untuk membuat efek gradiasi:

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

Untuk mendapatkan efek gradiasi yang lebih bervariasi sebenarnya anda juga bisa menambahkan property 'color-stop' untuk mengatur scale warna seperti yang terdapat pada Photoshop. Tetapi karena pengaturannya agak sulit, anda dapat memanfaatkan fasilitas dengan menggunakan tools yang ada pada CSS3 Gradient Generator.

Nanti akan ada kode yang muncul sesuai dengan pengaturan anda. Silahkan copy kode tersebut jika sudah selesai. Dan letakkan di bagian kode mana saja seperti body{background:..... dan seterusnya} atau lainnya.

Agar perubahan yang terjadi pada warna menjadi halus, contohnya anda dapat menggunakan kode script di bawah ini :

background: #b3dced; /* Old browsers */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzZGNlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5YjhlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiY2UwZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* IE10+ */
background: linear-gradient(to right,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=1 ); /* IE6-8 */

Paste kode diatas disamping atau dibawah kode body{........

Untuk kode lainnya seperti margin, padding,height, text decoration, height, color dan lainnya jangan dihapus. Yang anda hapus adalah kode background: sampai dengan pembatas titik koma ( ; )

Anda juga dapat mengatur dan merubah sendiri paduan warna-warni gradiasi tersebut di website ColorZilla - Ultimate CSS Generator

Selamat mencoba sendiri dan semoga bermanfaat. Itulah deskripsi berbagai macam efek gradiasi warna pada background.