Berkenalan dengan CSS sprite

CSS image sprite begitulah w3schools menyebut teknik ini. Banyak juga yang menyapa dengan sebutan CSS sprite. Web-web besar seperti facebook, google etc juga menggunakan teknik CSS ini dalam memanage gambar-gambar yang digunakan.

Kita semua tahu bahwa sebuah halaman website yang memiliki banyak gambar akan membutuhkan waktu loading lebih lama dibandingkan yang hanya mempunyai beberapa gambar saja. Disinilah CSS sprite berperan untuk memangkas waktu muat halaman web yang memanggil banyak gambar, karena gambar-gambar kecil dijadikan satu dalam sebuah file gambar.

Teknik ini biasanya digunakan untuk animasi halaman web pada menu maupun image, saat pointer mouse melewati sebuah menu, atau saat sebuah menu dikenakan event seperti klik dan lain lain. 

Smiley facebook yang sering digunakan dalam chat maupun komentar juga mengadopsi css sprite. Perhatikan gambar smiley ini

Sebenarnya smiley yang sering kita gunakan pada chat adalah sebuah gambar yang nampak seperti di atas. Tapi kenapa ketikaa kita menggunakan smiley ini yang ditampilkan hanyalah salah satu smiley yang sesuai dengan kode yang kita ketik saja?. Inilah kehebatan CSS sprite.


Trus gimana sih penerapan nyata CSS sprite itu?. 
Sederhana sekali, kita hanya memerlukan property width, height, background-image  dan background-position serta satu pseudo class yaitu hover untuk membuat animasi sederhana menggunakan CSS sprite ini.

Contoh gambar yang saya gunakan. 

Kita buat CSSnya seperti ini

.ganteng {
 width: 212px;
 height: 53px;
 display: block;
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYWz4EWvm5zlGdmSaTDRF1XZbauT0J97YgPjKwOipTSDBjh0XISecrpy-gurf9VAHrY71j8IvePzU5DRyCBR1oNjGhvIWaZh4YIxD4VfQ5gpfgBXH8uAFDmg24V-LWiglOhqiqUvPwjUI/s1600/ttsoke-logo-jempols.png');
 background-position: 0 0;
}

.ganteng:hover {
 background-position: 0px 53px;
}

Buat html-nya singkat aja

<a href="/" class="ganteng"></a>

Hasilnya akan menampilkan sebuah gambar yang akan berubah saat pointer mouse melewatinya

Penjelasan script di atas:

• Width: untuk mengatur lebar gambar yang ingin ditampilkan, pada contoh lebarnya adalah 212 piksel
• height: tinggi gambar yang akan tampil
• display: menampilkan gambar dalam blok (jika display: block; ini dihilangkan maka gambar juga tidak akan ditampilkan)
• background-image: Memanggil gambar yang akan di gunakan dan menjadikannya sebagai background
• background-position:Nah disini pengaturan utamanya, atur posisinya agar sesuai dengan peraturan lebar dan tinggi yang telah kita buat di atasnya. Nilai sebelah kiri untuk horisontal dan kanan untuk vertikal