Contoh Kode CSS dan HTML untuk perpaduan Gradarasi Warna pada background

Seperti yang telah kami uraikan pada artikel sebelumnya, dalam hal ini adalah artikel dengan judul "Contoh Kode CSS dan HTML untuk perpaduan Gradarasi Warna pada background", bahwasanya kita dapat menerapkan warna gradasi atau kombinasi warna pada background untuk tiap-tiap elemen halaman blog yang kita kelola dengan menyisipkan atau memasukkan kode CSS tertentu ke dalam template blog yang dipakai. Namun yang perlu diingat adalah bahwa contoh kode yang saya berikan pada artikel tersebut hanya satu macam, yaitu contoh kode CSS yang mengkombinasikan warna putih dan biru. Padahal sangat tidak mungkin apabila kita hanya menggunakan kombinasi warna yang sama untuk setiap elemen halaman yang ada. Sehingga kombinasi warna yang digunakan dalam membuat background dengan warna gradasi, tentunya akan lebih baik apabila dibuat secara bervariasi menyesuaikan dengan desain atau model halaman blog yang dikelola.

Dengan demikian maka selain tampilan halaman blog akan tampak proporsional, maka tampilan halaman pun akan tampak lebih profesional.

Bagi yang sudah mengerti dan juga memahami bahasa pemrograman Web (dalam hal ini misalnya adalah tentang CSS), bisa jadi tidak akan merasa kesulitan untuk membuat kode yang akan digunakan sebagai model atau variasi warna gradasi untuk background. Namun bagi kita yang masih awam atau sama sekali belum mengenal bahasa pemrograman, bisa jadi hal tersebut akan menjadi sebuah pekerjaan yang sangat sulit dan bahkan teramat rumit. Sehingga untuk mempermudah Sobat blogger yang dalam membuat dan menerapkan penggunaan warna gradasi sebagai warna latar atau background pada setiap elemen halaman blog, maka berikut ini saya berikan beberapa contoh kode CSS dengan berbagai kombinasi warna, dengan harapan agar nantinya dapat mempermudah dalam penerapan teknik ini.


Contoh kode CSS : RED

height: 35px;
width: 100px;
border: 1px solid #ff0000;
background: #ff0000; 
background: -moz-linear-gradient( center top, white 20%, #ff0000 100% ); 

background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ff0000) );

Contoh Kode HTML : RED

<div style="height: 35px; width: 100px; border: 1px solid #ff0000; background: #ff0000;background: -moz-linear-gradient( center top, white 20%, #ff0000 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ff0000) );"></div>

Contoh Kode CSS : ORANGE

height: 35px; 
width: 100px;
border: 1px solid #ff9900;
background: #ff9900; 
background: -moz-linear-gradient( center top, white 20%, #ff9900 100% ); 
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ff9900) );


Contoh Kode HTML : ORANGE

<div style="height: 35px; width: 100px; border: 1px solid #ff9900; background: #ff9900;background: -moz-linear-gradient( center top, white 20%, #ff9900 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ff9900) );"></div>

Berdasarkan beberapa contoh yang diatas maka kita dapat mengambil suatu kesimpulan bahwa kuncinya adalah terletak pada kode warna yang digunakan. Apabila kita perhatikan contoh kode yang paling bawah (dalam hal ini adalah contoh kode yang digunakan untuk membuat warna gradasi gabungan warna putih dan hitam), maka dapat disimpulkan bahwa kode #000000 digunakan untuk warna bagian bawah dan juga warna garis, sedangkan white digunakan untuk warna garis atau bingkai. Kemudian untuk membuat efek hover atau efek yang dimunculkan ketika mouse pointer diletakkan di atsnya, maka kita tinggal mengubah persentase yang terdapat pada kode background: -moz-linear-gradient( center top, white 20%, #000000 100% ); dengan angka persentase yang lebih besar.

Dengan demikian, berdasarkan yang kami buatkan  contoh dari penjelasan di atas, maka saya rasa akan dapat membantu Anda dalam memahami pembuatan background dengan warna gradasi untuk diterapkan pada setiap elemen dihalaman blog.