Dalam tutorial theme WordPress kemarin, saya menggunakan teknik CSS Sprites untuk membuat efek rollover pada logo blog. Nah, kali ini saya akan menjelaskan tentang CSS Sprites dan penggunaannya.
Konsep CSS Sprites kira-kira seperti ini:
- Beberapa gambar yang berbeda digabungkan menjadi satu gambar dengan software pengolah gambar, atau istilahnya membuat gambar master.
- Gambar master itu ditampilkan dalam beberapa elemen HTML pada suatu halaman web dengan posisi atau ukuran yang berbeda dengan menggeser posisi gambar menggunakan CSS
Untuk lebih jelasnya silakan lihat ilustrasi berikut ini:
Mengapa Menggunakan CSS Sprites?
Kelebihan utama CSS Sprites adalah mengurangi HTTP Request dari sebuah halaman web. Misalnya saja kita ingin menampilkan 5 buah ikon sosial media di blog kita, anggaplah 1 ikon ukurannya 2 KB, jadi total ukurannya 10 KB. Kemudian 5 ikon itu kita gabungkan dengan photoshop dan ukurannya menjadi 8 KB, ada penghematan 2 KB kan? Dengan menggunakan CSS Sprites selain mengurangi ukuran file juga mengurangi HTTP Request, dari 5 menjadi hanya 1. Bagi situs sekelas Yahoo atau Google yang mempunyai pengunjung ratusan juta, pengurangan sekecil itu adalah sebuah efisiensi yang sangat besar.
Salah satu contoh blog Indonesia yang menggunakan CSS Sprites adalah Navinot. Di blog ini hampir semua gambar dalam CSS dikombinasikan dalam sebuah gambar master berukuran besar, jumlahnya kurang lebih ada 20! Saya perkirakan nilai efisiensinya mencapai 50%.
Elemen yang dilingkari menggunakan CSS Sprites
Gambar yang digunakan untuk CSS Sprites
Bagaimana cara menggunakan CSS Sprites?
Pada prinsipnya CSS Sprites adalah menggeser koordinat X dan Y suatu gambar dengan CSS. Lihat baris kode berikut:
h1 a {
background-image:url(images/logo.png);
background-position:0 0;
height:86px;
text-indent:-9999px;
width:334px;
}
h1 a:hover{background-position:0 86px;}
Penjelasannya begini:
CSS mengatur agar elemen anchor (link) pada h1 menampilkan sebuah gambar (logo.png) dengan koordinat X dan Y masing-masing 0. Kemudian CSS mengatur agar ketika elemen anchor(link) pada h1 di-hover koordinat Y berpindah ke posisi 86px. Jadi CSS Sprites itu sebenarnya cuma memindah-mindah posisi gambar pada suatu elemen.
Anda masih bingung? Jika iya silakan baca-baca tulisan tentang CSS Sprites berikut :
Saya masih bingung menggunakan CSS Sprite terutama dalam mengatur koordinat X & Y, pernah saya coba tapi berakibat tidak rapi pada element lainnya.
Dan saya masih belum paham cara menggabungkan gambar .
saya biasanya menggeser posisi background image menggunakan Firebug, setelah ketemu angka yang cocok baru saya tulis di CSS. Bisa sih sebenarnya dihitung menggunakan Photoshop, tetapi lebih enak pake Firebug
Terimakasih atas infonya mas oglek, Lalu bagaimana cara menggabuingkan dua gambar? saya juga bingung seperti bro rudhy
mampir balik, ada wawancara dengan pak zam, di blog sya Promosi LOL
Menggabungkan gambar tentu saja dengan software pengolah gambar, saya menggunakan photoshop.
BTW, jangan panggil saya Oglek, sebut saja nama saya
Theme yang kemarin saya unggah terjadi encoding error pada class function, apakah karena tubrukan dengan plugin advenced exceprt ya?
banyak kemungkinan penyebab terjadinya error PHP di WordPress, kemungkinan bisa juga penyebabnya seperti yang anda katakan bisa juga tidak. Kalau boleh tolong beri penjelasan yang lebih detail
.
not understand.. but thanks
Membuat Sosial Media Sharing Button dengan Efek Rollover | Cekerholic
Mas Aris,
sama dengan mas Rudy, saya masih kelabakan menggunakan CSS sprite, kadang tampilan antar browser bisa aneh. Jan mumet
Memang untuk membuat CSS Sprites biasanya harus melalui proses trial and error beberapa kali. Saya biasanya mengatur CSS Sprites di firefox dengan pengaya Firebug, kemudian saya cek di browser lainnya apakah posisinya berubah atau tidak. Coba saja terus pak
Kalo menurutku, cara paling mudah untuk mengetahui X dan Y nya justru dari Photoshop.. tracingnya baru via Firebug.
Aku penggemar berat css sprites…
Hehehe tidak semua orang punya Photoshop dab, harganya kan selangit (walaupun bajakannya banyak
)
Blog saya udah pke nih, kunjungi aja biar lebìh detail di sana. Praktek dulu, bru kasih tutor..
haah..nyari disana-sini..taunya disini banyak tutorial..thanks infoné
wah praktek ahh, terimakasih sangat membantu