CSS Gradients - Membuat Background Linear Blogspot

Urusan background bisa jadi salah satu hal paling dasar untuk membuat blog terlihat menarik. Misalnya saja background dasar blog bagian body yang terletak paling belakang. Beberapa blogger memilih hanya bermain warna untuk loading ringan dan beberapa lagi memilih menggunakan gambar untuk loading yang tentu agak lebih barat. Background Linear Gradient bisa menjadi pilihan buat Anda yang ingin permak background blog Anda. Bukan terbatas untuk body saja, tapi Anda bisa terapkan di bagian yang Anda suka. Hari ini Anda akan bisa mendandani kepala blog Anda dengan topi kuning merah hijau dan memberi kaos kaki pelangi untuk kaki blog Anda.

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

Selanjutnya?

Silahkan Anda berkreasi sendiri dengan lebih banyak kombinasi warna, dan seperti saya katakan di awal.. hari ini Anda bisa mendandani kepala dan kaki blog Anda dengan topi dan kaus kaki berwarna-warni yang berbeda dari biasanya. Hanya dengan css yang super ringan... Silahkan mencoba...

---

CSS Code credit: http://css-tricks.com/examples/CSS3Gradient/ (lihat lebih jauh dengan demo)
Belajar CSS Dasar di mas doyok: /search/label/CSS

---