Anggri Yulio Pernanda Email : anggriyulio@gmail.com https://twitter.

com/anggriyulio

Mengenal Teknik CSS Sprites

Konsep CSS Sprites itu ternyata cukup sederhana, pada dasarnya kita hanya perlu menggabungkan beberapa gambar yang akan ditampilkan pada website/blog kita menjadi satu, atau biasa disebut dengan Gambar Master. Kemudian untuk menampilkannya cukup dengan menentukan titik Koordinat x, y pada gambar tersebut. Disini saya akan mengambil contoh pada situs jejaring sosial twitter. Coba perhatikan gambar dibawah :

Diatas adalah gambar menu navigasi pada situs twitter tersebut. Diatas terlihat 4 buah gambar yaitu pada bagian Home, Connect, Discover dan Me. Tapi sebenarnya gambar tersebut berada dalam satu kesatuan (Gambar Master) lihat gambar dibawah :

Nah, kira-kira seperti itulah konsep dasar dari Teknik CSS Sprites tersebut.

MARI KITA COBA

Saya akan membuat sebuah gambar yang bertuliskan ANGGRI (nama saya hehhe) dengan ukuran gambar 150 x 150 pixel.

Nah, disini saya mulai menggunakan teknik CSS Sprite untuk menampilkan gambar tersebut di browser sesuai dengan posisi yang saya inginkan. Yang saya lakukan hanya menentukan backgroundimage dan menentukan titik koordinat backround tersebut. Sehingga hasilnya menjadi seperti dibawah :

Anggri Yulio Pernanda Email : anggriyulio@gmail.com https://twitter.com/anggriyulio

Anggri Yulio Pernanda Email : anggriyulio@gmail.com https://twitter.com/anggriyulio

Kira-kira pada penulisan code CSS nya seperti ini :

0;

Intinya terletak pada koordinat -105 0 dimana koordinat tersebut adalah titik koordinat

huruf G yang pertama. Cukup mudah bukan ??? Untuk lebih mudahnya silahkan download sourcenya di
https://dl.dropbox.com/u/62559782/css/sprite.zip

--------------------------------------------------

Anggri Yulio Pernanda Email : anggriyulio@gmail.com https://twitter.com/anggriyulio