Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Button

236 views

Published on

  • Be the first to comment

  • Be the first to like this

Button

  1. 1. Sobat blogger, seperti yang telah saya uraikan pada artikel sebelumnya, dalam hal ini adalahartikel dengan judul "Cara Membuat Background Dengan Kombinasi Warna Pada ElemenHalaman Blog", bahwasanya kita dapat menerapkan warna gradasi atau kombinasi warna padabackground untuk tiap-tiap elemen halaman blog yang kita kelola dengan menyisipkan ataumemasukkan kode CSS tertentu ke dalam template blog yang dipakai. Namun yang perlu diingatadalah bahwa contoh kode yang saya berikan pada artikel tersebut hanya satu macam, yaitucontoh kode CSS yang mengkombinasikan warna putih dan biru. Padahal sangat tidak mungkinapabila kita hanya menggunakan kombinasi warna yang sama untuk setiap elemen halaman yangada. Sehingga kombinasi warna yang digunakan dalam membuat background dengan warnagradasi, tentunya akan lebih baik apabila dibuat secara bervariasi menyesuaikan dengan desainatau model halaman blog yang dikelola. Dengan demikian maka selain tampilan halaman blogakan tampak proporsional, maka tampilan halaman pun akan tampak lebih profesional.Bagi kita yang sudah mengerti dan juga memahami bahasa pemrograman (dalam hal inimisalnya adalah tentang CSS), bisa jadi tidak akan merasa kesulitan untuk membuat kode yangakan digunakan sebagai model atau variasi warna gradasi untuk background. Namun bagi kitayang masih awam atau sama sekali belum mengenal bahasa pemrograman, bisa jadi hal tersebutakan menjadi sebuah pekerjaan yang sangat sulit dan bahkan teramat rumit. Sehingga untukmempermudah Sobat blogger yang dalam membuat dan menerapkan penggunaan warna gradasisebagai warna latar atau background pada setiap elemen halaman blog, maka berikut ini sayaberikan beberapa contoh kode CSS dengan berbagai kombinasi warna, dengan harapan agarnantinya dapat mempermudah dalam penerapan teknik ini.Kode CSSheight: 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 CSSheight: 35px;width: 100px;border: 1px solid #ff9900;background: #ff9900;background: -moz-linear-gradient( center top, white 20%, #ff9900 100% );
  2. 2. 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 CSSheight: 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 CSSheight: 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
  3. 3. 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 CSSheight: 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 CSSheight: 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>
  4. 4. Kode CSSheight: 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 CSSheight: 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 bahwakuncinya adalah terletak pada kode warna yang digunakan. Apabila kita perhatikan contoh kodeyang paling bawah (dalam hal ini adalah contoh kode yang digunakan untuk membuat warnagradasi gabungan warna putih dan hitam), maka dapat disimpulkan bahwa kode #000000digunakan untuk warna bagian bawah dan juga warna garis, sedangkan white digunakan untukwarna garis atau bingkai. Kemudian untuk membuat efek hover atau efek yang dimunculkanketika mouse pointer diletakkan di atsnya, maka kita tinggal mengubah persentase yang terdapatpada kode background: -moz-linear-gradient( center top, white 20%, #000000 100% );dengan angka persentase yang lebih besar. Dengan demikian, berdasarkan beberapa contoh danpenjelasan di atas, maka saya rasa akan dapat membantu Anda dalam memahami pembuatan
  5. 5. background dengan warna gradasi untuk diterapkan pada setiap elemen halaman blog. Dan untukselanjutnya diharapkan agar Anda dapat mengembangkannya sendiri, sesuai dengan kreatifitasyang Anda miliki.Sumber: http://ilmudi.blogspot.com/2012/05/beberapa-contoh-kode-css-dan-html-untuk.html#ixzz296VcrFEk

×