CSS Image Sprite

28/10/2014    Aulia Rahmah Alhafidz    702     Website

Apa yang membuat kita betah dengan suatu website? Tentu saja tampilan layoutnya bukan? Dan satu lagi. Website tersebut tidak loading dengan begitu lama. Biasanya jika sedang membuka suatu website namun loading lama, apa yang akan dilakukan? Langsung close bukan? Itu dia. Lalu, bagaimana caranya agar website yang kita punya tidak loading lama?

Kita bisa menggunakan sprite image? Apa itu? Gambar yang begitu banyak, namun berada dalam 1 gambar. Tidak paham ya? Coba lihat gambar di bawah ini.

CSS-Image-Sprite

Begini alurnya : Kita akan menampilkan social icon di website kita dengan warna icon abu-abu (gambar atas), namun ketika di-hover, gambar tersebut akan berubah warna sesuai dengan gambar yang berada di bawahnya.

Langsung buat saja ya!

Langkah Pertama, buat file HTML seperti berikut :

CSS-Image-Sprite

Kenapa kita membuat 2 class di tiap tag a? Class icon akan digunakan untuk meletakkan gambar seperti yang dicontohkan di atas, sedangkan fb/insta/tw akan digunakan untuk mengatur posisi gambar.

Langkah Kedua, buat file CSS seperti berikut :

CSS-Image-Sprite

Apa maksud dari background-position: 420px 120px?

Kita bahas dari awal, gambar ini akan diset 60x60px. Ukuran gambar asli adalah 660x120px.

Kita perhatikan icon twitter, dia memiliki background-position: 180px 120px.180px adalah untuk ukuran kanan kiri, jika semakin besar angka, gambar akan bergeser menjadi gambar yang ada di sebelah kanannya. Sebaliknya, jika semakin kecil gambar yang diambil adalah gambar sebelah kiri.

Lalu dari mana kita memperoleh 180px 120px?

Kita lihat icon twitter merupakan icon ketiga dari ujung kanan. Betul? Karena ukuran gambar yang diset 60x60px, maka kita buat perhitungan, 60x3 = 180. Jadilah kita mengambil 180px.

Dan yang 120px? Karena ukuran lebar gambar adalah 120px, maka ukuran yang diambil adalah 120px. Pada saat kita hover, kita akan mendapatkan gambar yang berwarna. Oleh karena itu, kita ambil gambar bawah yang merupakan setengah dari ukuran lebar (120:2=60px).

Paham?

Langkah Ketiga, save dan lihat hasilnya :

CSS-Image-Sprite

Benar kan kita mendapat gambar atas yang berwarna abu-abu.

Dan saat kita hover, gambar akan berubah menjadi gambar yang memiliki warna.

CSS-Image-Sprite

Mudah sekali ya? Semoga bermanfaat :)

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More