Membuat CSS Sprite Pada Link-link Yang Memakai Gambar

Pada tulisan sebelumnya, mengenai cara membuat CSS Sprite, saya menjelaskan bagaimana CSS Sprite mampu mempersingkat waktu pemanggilan gambar dari image hosting sehingga membuat loading page menjadi sedikit lebih ringan (cepat) dibanding biasanya.

Namun tulisan tersebut hanya memuat seputar pembuatan CSS saja, tidak mengupas bagaimana membuat CSS Sprite untuk gambar-gambar yang diletakkan pada HTML dan digunakan sebagai link, seperti untuk readmore, blog pager, social bookmark, sticky social, dll.

Untuk membuat CSS Sprite pada gambar-gambar yang dijadikan link tersebut harus dibuat dua buah gambar: Satu gambar berupa gabungan beberapa gambar untuk CSS Sprite, dan satu lagi berupa gambar transparan (dengan format png) untuk link.

Sebagai contoh, misalkan menggabungkan gambar social icon dengan ukuran 36 x 36 dan membuat gambar transparan berukuran 32 x 32, seperti gambar berikut:
Maka untuk CSS gambar tersebut (yang diletakkan di atas ]]></b:skin>) dibuat seperti ini:

img.icon1 { background:url(URL Gambar Sprite) 0 0; width:36px; height:36px; }

img.icon2 { background:url(URL Gambar Sprite) -36px 0; width:36px; height:36px; }

img.icon3 { background:url(URL Gambar Sprite) -72px 0; width:36px; height:36px; }

img.icon4 { background:url(URL Gambar Sprite) -108x 0; width:36px; height:36px; }

img.icon5 { background:url(URL Gambar Sprite) -144px 0; width:36px; height:36px; }

Catatan:

Bisa juga nama icon1, icon2, icon3, dst., diganti dengan facebook, twitter, google, dll.

Kemudian pada link icon-icon tersebut dibuat seperti ini:

<a href="Link Facebook"><img class="icon1" src="URL Gambar Transparan" /></a>

<a href="Link Twitter"><img class="icon2" src="URL Gambar Transparan" /></a>

<a href="Link Google"><img class="icon3" src="URL Gambar Transparan" /></a>

<a href="Link Friendster"><img class="icon4" src="URL Gambar Transparan" /></a>

<a href="Link hi5"><img class="icon5" src="URL Gambar Transparan" /></a>

Dengan membuat CSS Sprite seperti ini maka gambar icon-icon tersebut tidak dipanggil 5 kali melainkan hanya 2 kali, 1 kali ke gambar sprite dan 1 lagi ke gambar transparan.

Ok, segitu aja sob. Semoga bermanfaat .....

Friday, April 12, 2013