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
sumber : http://ilmudi.blogspot.com/2012/05/cara-membuat-bingkai-atau-tombol-dengan.html
0 komentar:
Posting Komentar