CSS Gradasi Warna Penerapan pada Template

CSS Gradasi warna-Penerapannya pada template sebenarnya sangat mudah. Kalau anda sedikit memahami mengenai koding tentu hal ini bukan perkara yang susah lagi. Tapi saya rasa, saya mempunyai kesempatan melengkapi artikel gradasi warna dengan kode CSS. Akan saya lengkapi dengan penerapannya pada template.

Penerapan gradasi warna pada template

1. Masuk ke dasbor blogger
2. Tuju "Ranjangan" terus klik "Edit Html"
3. Sebagai contoh kode CSS untuk Header.
Cari kode seperti ini

#header-wrapper {
  background: #ffffff;
  width:600px;
  margin:0 auto 0;
  height:80px;
  }

ganti

background: #ffffff;

dengan kode yang diambil di colorzilla.com
contoh:

background: #fcecfc; /* Old browsers */

background: -moz-linear-gradient(top, #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcecfc), color-stop(50%,#fba6e1), color-stop(51%,#fd89d7), color-stop(100%,#ff7cd8)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* Opera11.10+ */

background: -ms-linear-gradient(top, #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* IE10+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=0 ); /* IE6-9 */

background: linear-gradient(top, #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* W3C */

Color format:     Comment

menjadi seperti ini

#header-wrapper {
  background: #fcecfc; /* Old browsers */

background: -moz-linear-gradient(top, #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcecfc), color-stop(50%,#fba6e1), color-stop(51%,#fd89d7), color-stop(100%,#ff7cd8)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* Opera11.10+ */

background: -ms-linear-gradient(top, #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* IE10+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=0 ); /* IE6-9 */

background: linear-gradient(top, #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* W3C */

Color format:     Comments

  width:600px;
  margin:0 auto 0;
  height:80px;
  }


Ini contoh saja, kalau anda berhasil warnanya seperti ini


Nah mudah bukan, penerapan CSS gradasi warna pada tempate. Sekali lagi kodenya dapat diambil di colorzilla.com gratis. Gradasi warna dapat disesuikan dengan tema blog. Thank you.