BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

List Image Dengan Teknik Css sprite

Ada yang  lucu kemarin malam ketika saya  gogling mencari alih bahasa  yang tepat untuk istilah yang satu ini " Css Sprite ". Selain sedikit sekali input yang kelur membahas tentang Css Sprite di webnya indonesia,  juga muncul di index pencarian ;   sprite campur Es batu.. hiksss :)

Namun satu hal yang sering saya temukan, setiap kali tulisan yang membahas tentang Css sprite , hampir semua reperensinya merujuk pada artikel yang di tulis oleh Dave Shea  " Css Sprites: Image Slicing Kiss of Death " di situsnya Alistpart.

gambar 2

View Demo

Menurut sebagian orang,  Css sprite hampir mirip hasilnya dengan cara  Image Map, di mana satu gambar bisa mempunyai beberapa alamat link tersendiri.

Namun kelebihan dari teknik Css sprite ini, selain simple penulisan kodenya, lebih dinamis  juga cakupannya lebih kreatif. karena bukan hanya membagi-bagi satu gambar untuk beberapa link , Akan tetapi  juga dapat membuat atau mengabungkan beberapa gambar  icon menjadi satu gambar untuk   di jadikan daftar list-image , seperti yang kita lihat di bagian kiri sidebar situsnya yahoo.

icon-04a

Mengabungkan beberapa icon ke dalam satu gambar

Bahkan yang lebih nyeleneh lagi, ada yang mengunakan teknik css sprite ini ke dalam  background halaman page-nya.

Maksud dan kegunaan dari Css sprite ini sendiri  pada intinya untuk mempersingkat loding sebuah halaman web atau blog  yang banyak mengunakan gambar,  dengan cara mengabungkan beberapa gambar tersebut ke dalam satu gambar. walaupun pada kenyataannya gambar yang di gabungkannya itu menjadi  sangat besar. ( jika yang sering mengunakan program animasi  flash pasti tahu istilah sprite , hampir setali tiga juta dengan konsep Css sprite ini.).

Contoh loding list Image dengan cara biasa, - yakni memasukan gambar iconnya satu persatu ke dalam list.

gambar 3

View Demo
( contoh saya ambil from Css trick.com )

Contoh loding list image dengan mengunakan Css Sprite. ( yakni mengabungkan gambar icon-nya ke dalam satu gambar )

gambar 3

View Demo
( contoh saya ambil from Css trick.com )

Praktek

Mengunakan  Css sprite untuk list image , perintah kode dalam css-nya sih sangat simple, yakni kita mengunakan Background-Position: x -y atau -x -y px. perintah ini untuk mengeser-geser gambar agar gambar yang muncul sesuai dengan yang kita inginkan.

Contoh yang sederhana seperti yang di gunakan oleh Yahoo. pertama mengabungkan beberapa gambar icon dengan bantuan program photoshop. jarak vertikal antara gambarnya 40px, sedangkan jarak horizontal antara gambar 300 px.

icon-04b

Kemudian menulis dalam css-nya, :

#menu li {
list-style:none;
font-size:12px;
padding:0px;
margin:0px;
}
#menu li a {
background:url(img/icon-04a.gif) no-repeat scroll 0pt;
display:block;
font-family: Georgia;
font-size:84%;
line-height:normal;
margin:0px;
padding:3px 0pt 13px 40px;
text-indent:-15px;
}

 

Sedangkan dalam Html-nya :

<ul id="menu">

/* jarak antar vertikal */
<li><a style="background-position: 0pt 0px;" href="#">List 1</a></li>
<li><a style="background-position: 0pt -40px;" href="#">List 2</a></li>
<li><a style="background-position: 0pt -160px;" href="#">List 3</a></li>
<li><a style="background-position: 0pt -120px;" href="#">List 4</a></li>

/*jarak horizontal dan vertikal */
<li><a style="background-position: -300px 0px;" href="#">List 5</a></li>
<li><a style="background-position: -300px -40px;" href="#">List 5</a></li>
<li><a style="background-position: -300px -80px;" href="#">List 5</a></li>
</ul>

hasilnya :

View Demo | View Donlot

 

Reperence

- CSS Sprites: What They Are, Why They're Cool, and How To Use Them
Css-Tricks.com
- CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
websiteoptimization.com
- CSS Sprites: Image Slicing’s Kiss of Death
alistapart.com.

Technorati tags:

 

Page views this post: reader

9 komentar:

Kristina Dian Safitry said...

kayaknya unik juga ya bang...

Bani Risset said...

Haduuhhh... gw "ga nyampe" uuyyy...

Tamrin said...

hiks hiks hiks ... gak ngerti

>> Let's Change The World!

Firdaus Ariefatosa said...

tar dulu.. gw mikir dulu nih ya..

Komentarnya standar aja.. keren kang.

Tapi tar dulu.. mikir dulu nih...

Subagya said...

hmmmm..pusing saya .... kapan-kapan belajar ah.. kekekekekek

Unknown said...

kang... ko susah ya.... btw... demonya koq nggak bisa dilihat... jadi kan bisa di copy langsung dari situ... mhon bantuannya kang jaloe nich...

Jaloee said...

@ Firex santos

wah bener jg kek na.. sudah berubah link na

sorri gan.. ane ngga pernah cek lagi

Anonymous said...

Makasih untuk infonya numpang bolehkan TIANG ANTRIAN untuk antrian biar ga semerawut

Trik Mahal dan bayar said...

Baru tau dengan jelas apa itu css sprite berkat informasi dari blog ini ,, thanks gan ..

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial