Cara Membuat Bingkai Atau Tombol Dengan Warna Gradasi (Gradient Colour) Pada Blog

Selain besar kecilnya bandwidth sambungan internet yang dipakai untuk mengakses internet, salah satu faktor yang menjadi penyebab utama lambatnya penayangan atau loading halaman sebuah situs web atau blog adalah penggunaan gambar untuk setiap elemen halaman dari situs web atau blog yang dimaksud (misal: background, header, tab menu, widget, dan lain sebagainya). Walaupun pada dasarnya penggunaan gambar untuk setiap elemen halaman (seperti pada contoh di atas) dapat menjadikan tampilan halaman menjadi lebih ‘cantik’ dan terkesan profesional, namun pada kenyataannya cara ini sangat berpengaruh terhadap kecepatan penayangan halaman sebuah situs web atau blog, terutama apabila sambungan internet yang digunakan memiliki kapasitas bandwidth yang kecil atau rendah. Hal ini disebabkan karena dengan menggunakan gambar untuk setiap elemen halaman akan mengakibatkan browser melakukan request terlebih dahulu atas konten gambar yang digunakan, ke beberapa server yang berbeda (sesuai dengan dimana gambar yang dimaksud disimpan) sebelum pada akhirnya menayangkan halaman secara keseluruhan. Padahal bisa jadi konektifitas antara satu server dengan server yang lainnya tidaklah sama. Sehingga apabila konektifitas dengan sebuah server tidak lancar, maka secara otomatis pula proses request untuk konten yang dimaksud akan menjadi semakin lama.

Nah, berdasarkan alasan di atas, maka sebenarnya hal tersebut dapat disiasati dengan cara menggunakan warna solid untuk setiap elemen halaman, sehingga browser tidak perlu lagi melakukan request ke beberapa server yang berbeda karena proses akan langsung ditangani oleh browser yang saat itu dipakai untuk mengakses internet. Namun sayangnya penggunaan warna solid sebagai pengganti gambar yang digunakan pada setiap elemen halaman malah akan mengakibatkan tampilan halaman tampak monoton dan terkesan kurang profesional, sehingga solusinya adalah dengan menggunakan atau menerapkan gradasi warna (gradient colour) pada elemen halaman yang diinginkan. Gradasi warna atau gradient colour dapat diartikan sebagai penggabungan atas satu warna dengan warna yang lainnya. Dimana hal ini tentunya akan sangat berbeda bila dibandingkan dengan penggunaan warna solid yang dapat diartikan sebagai penggunaan satu macam warna saja. Sehingga dengan cara tersebut (penggunaan warna gradasi atau gradient colour), selain proses penayangan halaman dapat dilakukan dengan lebih cepat, tampilan halaman pun tetap tampak ‘cantik’ dan terkesan lebih profesional.

Oke, sekarang kita kembali pada pokok pembahasan utama, yaitu tentang cara membuat bingkai atau tombol dengan warna gradasi (gradient colour) pada halaman sebuah situs web atau blog. Apabila kita ingin membuat suatu bingkai atau tombol dengan warna gradasi untuk diterapkan pada halaman sebuah blog, seperti yang tampak pada halaman blog ini (yaitu seperti yang tampak pada header, tab menu, judul widget dan artikel, daftar artikel terkait, serta footer), maka dapat dilakukan dengan 2 (dua) cara, dimana cara yang pertama adalah dengan menggunakan kode seperti contoh kode di bawah ini.

.bingkai_warna_gradasi {
height: 100px;
width: 463px;
padding: 5px;
border-radius: 2px;
border: 1px solid #c4c4c4;
background: #073763;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #3d85c6) );
background: -moz-linear-gradient( center top, white 20%, #3d85c6 100% );
}

Apabila diterapkan, maka kode di atas akan menghasilkan bingkai seperti yang tampak di bawah ini.

Namun, satu hal yang perlu diingat adalah bahwasanya kode di atas hanya dapat diterapkan dengan menyisipkan atau memasukkannya ke dalam template yang digunakan. Sehingga dapat diartikan bahwa kode tersebut tidak dapat digunakan untuk membuat bingkai dengan cara menyisipkan atau memasukkannya langsung ke dalam konten artikel yang akan diposting atau diterbitkan. Sehingga apabila kita ingin membuat bingkai dengan cara menyisipkan atau memasukkannya langsung kode yang dimaksud ke dalam konten artikel yang akan diposting atau diterbitkan, maka dapat dilakukan dengan cara yang kedua, yaitu dengan menggabungkan kode tersebut ke dalam sebuah tag ‘div’, seperti yang tampak pada kode di bawah ini.

<div style="height: 100px; width: 463px; padding: 5px; border-radius: 2px; border: 1px solid #c4c4c4; background: #073763; -webkit-border-radius: 2px; -moz-border-radius: 2px; background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #3d85c6) ); background: -moz-linear-gradient( center top, white 20%, #3d85c6 100% );">

---------------- konten ---------------- 

</div>

Berbeda dengan kode yang digunakan pada cara pertama (yang hanya dapat diterapkan dengan menyisipkan atau memasukkannya ke dalam template), kode yang digunakan pada cara kedua ini dapat diterapkan secara langsung dengan menyisipkan atau memasukkannya secara langsung ke dalam konten artikel yang akan diterbitkan maupun dengan cara menyisipkan atau memasukkannya ke dalam template blog yang digunakan. Namun walaupun demikian, pada prinsipnya antara kode yang digunakan pada cara pertama dan kode yang digunakan pada cara kedua, fungsi dan kegunaannya adalah sama, yaitu untuk membuat bingkai atau tombol dengan warna gradasi atau gradient colour.

Dan selanjutnya, terkait dengan ukuran yang digunakan dalam pembuatan bingkai atau tombol dengan warna gradasi tersebut, kita dapat menyesuaikannya dengan mengubah satuan yang terdapat pada kode height: 100px; dan width: 463px;, sedangkan untuk kombinasi warna yang digunakan, kita dapat mengubah kode #c4c4c4; #073763; dan #3d85c6; serta white dengan kode dan atau warna lain sesuai dengan warna yang diinginkan. Sementara itu, untuk contoh penerapan secara langsung atas pembuatan bingkai atau tombol dengan warna gradasi untuk ‘mempercantik’ tampilan dan mempercepat loading atau penayangan halaman blog sebagai pengganti konten gambar, akan saya uraikan pada artikel yang berbeda sesuai dengan penerapannya terhadap masing-masing elemen halaman.

Semoga berguna dan bermanfaat
Salam.

 

Sumber : http://ilmudi.blogspot.com/