CARA MENGGUNAKAN CSS SPRITE

CARA MENGGUNAKAN CSS SPRITE
Apa itu Css Sprite?
Css spite adalah kumpulan beberapa gambar yang disatukan menjadi satu file gambar dengan tujuan untuk mengurangi http request. Gambar yang biasanya dibuat sprite image adalah gambar-gambar penghias blog seperti ikon-ikon dan sebagainya. Contoh dari penggunaan css sprite ini seperti ikon pada menu navigasi (seperti pada blog ini), ikon media sosial, bullet list dan sebagainya.

Mengapa Css Sprite?
Alasan mengapa kita menggunakan css sprite mungkin karena kita menginginkan sesuatu yang lebih unik karena gambar yang digunakan adalah gambar yang kita pilih sesuai dengan keinginan atau mungkin kita buat sendiri, alasan lain yaitu mengurangi http request serta penambahan waktu load blog yang diakibatkan oleh penggunaan css eksternal ikon font.


Penerapan Css Sprite
Pertama-tama kita perlu menggabungkan beberapa gambar, bisa digabungkan dengan menggunakan software seperti photoshop, microsoft paint, gimp, corel draw, adobe illustrator dan sebagainya, atau dengan menggunakan bantuan dari website css sprite generator. Untuk cara penerapan css sprite dalam blog cukup mudah misalnya, saya mempunyai markup seperti ini:

<ul class='sosikon'>
<li><a href='#'>facebook</a></li>
<li><a href='#'>twitter</a></li>
<li><a href='#'>plus+</a></li>
<li><a href='#'>rss</a></li>
</ul>


Karena target yang saya mau beri background adalah linknya, maka saya akan menggunakan selektor child sosikon maka properti cssnya yaitu:
.sosikon li a{background:#fff url('url gambar')}
contohnya saya akan menggunakan gambar dibawah sebagai background


Maka kode CSS seperti ini:
.sosikon li a{background:#fff url('https://3.bp.blogspot.com/-tpkkYR0hF4A/V1aDkIIsWPI/AAAAAAAABS0/gAlzEJ90u_0ZWyTO1ZvFLKyqbZJ3SoYngCLcB/s1600/csss-prite.png')no-repeat}
.sosikon li a:nth-child(1){background-position:0 0}
.sosikon li a:nth-child(2){background-position:0 -48px}
.sosikon li a:nth-child(3){background-position:0 -24px}
.sosikon li a:nth-child(4){background-position:0 -72px}

Dan hasilnya akan seperti ini:
CARA MENGGUNAKAN CSS SPRITE

Css sprite atau fontawesome?
Kebanyakan blog kita temui mungkin menggunakan ikon dari fontawesome. Alasannya mungkin karena praktis saja, secara fontawesome memiliki ratusan ikon dan kita tinggal memilih dan memasangnya di dalam blog, selain itu fontawesome scalable seperti halnya font bisa diubah ukurannya dengan menggunakan property font-size, sedangkan jika menggunakan css sprite ukuran gambar bisa diperkecil namun jika diperbesar akan menjadi blur. Jadi penggunaan css sprite yah tergantung kebutuhan saja...

Blogger (5)
Disqus

5 komentar

Tulis Komentar

Kegunaannya untuk blog biar jadi ringan ya, mas... untuk memasangnya perlu keahlian khusus soalnya berhubungan dengan aplikasi pengubah gambar seperti photoshop, micr. paint, corel dll.

Balas

iya kang,kalo pemasangannya sebenarnya tak perlu keahlian khusus sih, yg penting bisa sedikit css

Balas

saya belum faham yang beginian..., oh iya mas , itu gimana cara bikin komentarnya Admin ada logo A nya gitu :)

Balas

itu author flagnya yg diedit mas, kalo di kebanyakan komentar modif pakai tulisan "admin" :) saya pangkas jd "A" doang

Balas

oohh gitu ya .., q coba dulu mas..., terima kasih

Balas