Untuk urusan menghias background,sangatlah penting,karena background sendiri bisa menjadikan web atau blog sedap di pandang mata,dan membuat nyaman bagi pengunjungnya,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.
CSS Gradient Atas ke Bawah
CSS Gradient Kiri ke Kanan
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.
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.
CSS Radial Gradient, Gradasi ke Arah Tengah
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.
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
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):
6. Simpan template Anda
Setelah itu??
Silahkan berkreasi menurut imajinasi anda...contoh di atas bisa anda kembangkan sendiri sesuai expresi anda.
inspirator : masdoyok
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);
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);
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);
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);
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);
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);
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
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.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);
}
6. Simpan template Anda
Setelah itu??
Silahkan berkreasi menurut imajinasi anda...contoh di atas bisa anda kembangkan sendiri sesuai expresi anda.
inspirator : masdoyok
Description: belajar blog untuk pemula,CSS gradients Rating: 4.5
EmoticonEmoticon