Membuat Warna Background Dengan Warna Gradient

Tampilan Background Gradient
Membuat Warna Background Dengan Warna Gradient Menggunakan CSS – Warna Background merupakan komponen penting dalam upaya mempercantik sebuah tampilan, baik tampilan warna background di halaman posting maupun di sidebar atau gadgets. Spekulasi warna background dengan warna gradient tersebut bisa melengkapi kreasi kita dalam memberikan daya tarik tersendiri bagi pengunjung blog.

Berbicara tentang background, sebenarnya kita bisa membuatnya dengan berbagai cara modifikasi Colors, Gradients, Hatching, Bitmap atau menambahkan berbagai image/gambar yang menarik. Namun cara menambahkan image jauh lebih ribet dibandingkan dengan membuat warna background dengan warna gradient (gradasi). Untuk membuat background dengan warna gradient, kita bisa menggunakan kode CSS disertai beberapa HTML.

Salah satu contoh background dengan warna gradient yang saya maksudkan adalah seperti tampilan di bawah ini:

CONTOH BACKGROUND DENGAN WARNA GRADIENT

Sedangkan cara membuat warna background dengan warna gradient tentunya sangat mudah, karena kita hanya menggunakan kode CSS dan HTML. Untuk membuat seperti tampilan di atas, silakan sahabat copy kodenya di bawah ini lalu pastekan pada halaman posting (HTML) atau gadget (Javascript/HTML):


Untuk pengembangan background dengan warna gradient ini, sahabat bisa memodifikasi sendiri pada nilai warna serta prosentase yang digunakan. Pada tingkatan yang paling meriah, sahabat juga bisa membuat warna background seperti warna pelangi, tentunya dengan menambahkan lebih banyak lagi warna gradient tersebut. Kuncinya sahabat harus hafal/memiliki daftar kode berbagai warna, jika belum punya silakan kunjungi postingan saya sebelumnya, yaitu Kumpulan Kode Warna. Berikut ini contoh tampilan background seperti warna pelangi:

CONTOH BACKGROUND DENGAN WARNA GRADIENT

Cara membuat warna background dengan warna gradient seperti warna pelangi di atas sama dengan cara pertama sebelumnya. Silakan sahabat copy kodenya di bawah ini lalu pastekan pada halaman posting (HTML) atau gadget (Javascript/HTML):


Kode script berikut ini adalah khusus untuk menjawab pertanyaan Miztia-Respect, yaitu Membuat Judul Widget Dengan Background Warna Gradient. Pada contoh berikut ini saya buatkan warna yang meriah seperti di halaman: Menampilkan Google+ Circles Di Halaman Posting.


 
Note:
  1. Pilih widget HTML/Javascript
  2. Judul widgetnya kosongkan saja
  3. Tempatkan kode background warna gradient di atas sebelum isi widget
  4. Ganti tulisan "TEMPAT JUDUL WIDGET" sesuai Judul Widget
  5. Sesuaikan nilai Warna (red, yellow, orange, green, white,indigo, violet), padding (8px, 4px, 4px, 4px) dan margin (margin-top: -7px, margin-right: -16px, margin-left: -5px) sesuai template.
Demikian cara Membuat Warna Background Dengan Warna Gradient Menggunakan CSS ini disharekan di Jambogh Kita, semoga bermanfaat serta menambah wawasan kita khususnya dalam mempercantik tampilan blog dengan modifikasi background dengan warna gradient. 

Gambar Datok Aghas Hijaoe Terima kasih sudah membaca “Membuat Warna Background Dengan Warna Gradient”, jika sahabat sudah selesai membaca informasi ini, sahabat masih bisa mendapatkan berbagai informasi lainnya di Jambogh Kita . Pastikan sahabat telah menyimpan url (http://www.jamboghkita.com/2013/02/membuat-background-dengan-warna-gradient.html) ini sebelum mendapatkan informasi lainnya melalui kotak penelusuran Jambogh Kita berikut ini :

* Gunakan Browser Google Chrome