Beberapa Contoh Kode CSS Dan HTML Untuk Membuat Gradasi Warna Pada Background

Sobat blogger, seperti yang telah saya uraikan pada artikel sebelumnya, dalam hal ini adalah artikel dengan judul "Cara Membuat Background Dengan Kombinasi Warna Pada Elemen Halaman Blog", 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 kita yang sudah mengerti dan juga memahami bahasa pemrograman (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.

Kode CSS

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) );

Kode HTML

<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>

Kode CSS

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) );

Kode HTML

<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>

Kode CSS

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

Kode HTML

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

Kode CSS

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

Kode HTML

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

Kode CSS

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

Kode HTML

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

Kode CSS

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

Kode HTML

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

Kode CSS

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

Kode HTML

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

Kode CSS

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

Kode HTML

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

Kode CSS

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

Kode HTML

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

Nah, berdasarkan beberapa contoh di atas maka kita dapat mengambil suatu kesimbulan 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 beberapa contoh dan penjelasan di atas, maka saya rasa akan dapat membantu Anda dalam memahami pembuatan background dengan warna gradasi untuk diterapkan pada setiap elemen halaman blog. Dan untuk selanjutnya diharapkan agar Anda dapat mengembangkannya sendiri, sesuai dengan kreatifitas yang Anda miliki.

Semoga berguna dan bermanfaat.

Salam.