Cara Membuat Varian Backgraund Garidient

Nah sekarang jamannya simlpe simple, sekarang ini say punya sedikit tips walaupun tips ini saya peroleh dari mas doyok yang udah master gitu loe namun saya coba berbagi kepada para teman saya yang sudah susah paya memfollow saya untuk mendapatkan Info Update dari saya nah sekarang kita lihat tutorialnya walupun gak begitu sip tulisan saya.

CSS Gradient Atas ke Bawah

background:-moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
background:-webkit-linear-gradient(#2F2727, #1a82f7);
background:-o-linear-gradient(#2F2727, #1a82f7);

CSS Gradient Kiri ke Kanan

background:-moz-linear-gradient(left, #2F2727, #1a82f7);
background:-webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727));
background:-webkit-linear-gradient(left, #2F2727, #1a82f7);
background:-o-linear-gradient(left, #2F2727, #1a82f7);

CSS Gradient dengan Color Stop

Color Stop adalah warna pemberhenti effect gradient. Misalkan Anda membuat effect gradient dari hitam ke biru kemudian ke hitam lagi. Maka di tengah-tengah effect dari hitam ke biru, kemudian dari biru ke hitam, maka akan ada warna total biru sebagai pembatas effect.

background:-moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
background:-webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727));
background:-webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
background:-o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);

CSS Gradient dengan Arbritary Stop Spesifik

Berbeda dengan color stop di atas yang warna pemberhentinya berada di tengah effect, dengan css ini Anda bisa tentukan posisi dimana warna pemberhenti akan ditempatkan.

background:-moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
background:-webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));
background:-webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
background:-o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

CSS Radial Gradient, Gradasi ke Arah Tengah

background:-moz-radial-gradient(circle, #1a82f7, #2F2727);
background:-webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7),
background:-webkit-radial-gradient(circle, #1a82f7, #2F2727);

CSS Radial Gradient dengan Pengaturan Posisi

Jika pada point sebelumnya, warna gradasi akan tepat mengarah ke tengah membentuk seperti lingakaran penuh, maka dengan ini Anda bisa atur lokasinya agak ke kanan atas, kiri bawah atau tempat lain yang Anda suka dan otomatis bentuknya pun akan sedikit melonjong.

background:-moz-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
background:-webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#1a82f7), to(#2F2727));
background:-webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);

Keterangan Tambahan
- Semua Effect CSS di atas support untuk Firefox 3.6 ke atas, Safari 4 ke atas, Chrome dan Opera 11.10 ke atas, kecuali effect radial gradient belum bisa diterima di opera.
- Untuk mengganti warna silahkan Anda ganti pada bagian yang diawali #, misal #000 adalah kode warna hitam dan #fff adalah kode warna putih. (Rujukan: daftar Kode Warna HTML)

Contoh Penerapan

Misalkan Anda ingin menerapakn effect CSS ini pada background blog Anda, maka silahkan Anda ikuti langkah berikut:
1. Login Blogger
2. Rancangan -> Edit HTML
3. Cari kode body {
4. Dan masukkan kode di atas seperti contoh berikut (saya gunakan contoh css gradient dengan warna pemberhenti pada posisi tertentu):

body {

background:-moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

background:-webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7),color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));

background:-webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

background:-o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

}

5. Lakukan pengaturan seperlunya. #2F2727 dan #1a82f7 adalah warna untuk gradasi. 5% dan 0.05 adalah posisi warna pemberhenti dimunculkan (perbedaan prosentase dan koma karena perbedaan pembacaan browser). Left adalah posisi awal effect.
6. Simpan template Anda


Selamat Mencobat semoga berhasil kedepanya nih.