Button

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

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

Sumber: http://ilmudi.blogspot.com/2012/05/beberapa-contoh-kode-css-dan-html-
untuk.html#ixzz296VcrFEk

Button

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Button