image

Mengenal css sprite

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn

Pernahkah anda mendenganr teknik css sprite? nah saya yakin agan –agan semua sudah kenal dengan teknik css sprite namun bagi yang belum mengenal mari kita sama –sama belajar dan memahami bagaimana teknik dasar dari css sprite.

Sebagian besar masalah beratnya sebuah website dipengaruhi dari berbagai aspek salah satunya adalah dari penggunaan images. Jika kita style website dengan cara memotong2 image yang dbutuhkan pastinya kita mempunyai banyak images yang terdapat pada folder kita untuk  digunakan pada style website.

Teknik css sprite adalah tekik untuk  menggabungkan beberapa  images menjadi satu supaya dalam pemanggilan image hanya satu yang dipanggil meski yang digunakan adalah image yang berbeda. Secara konsep dasar seperti itu. Berikut contoh membuat css sprite:

  • Html
<div>
	<ul>
		<li class="tw"><a href="#"></a></li>
		<li class="yt"><a href="#"></a></li>
		<li class="fb"><a href="#"></a></li>
		<li class="in"><a href="#"></a></li>
	</ul>
</div>
  • Css
ul li{
		float: left;
	}
	ul li a{
		width: 60px;
		height: 60px;
		background: url(img/icon.png) no-repeat;
		display: inline-block;
	}
	ul li.tw a{	background-position: 0px 0px;}
	ul li.yt a{	background-position: -70px 0px;}
	ul li.fb a{	background-position: -140px 0px;}
	ul li.in a{	background-position: -210px 0px;}
  • Penjelasan

dari code diatas penjelasan sprite terdapat pada penggunaan  background yang memanggil satu image yaitu image “icon.png”. sedangkan penggunaan imagenya berbeda untuk setiap link.  Pemanggilan image cuma dipanggil sekali. untuk mengatur posisi image, cuma memainkan background-position.

ada beberapa website yang menyediakan layanan untuk generator css sprite diantaranya pada situs:

dan banyak lagi website yang bisa kita gunakan untuk mempermudah membuat css sprite.

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn
About Ihsan atkia

Ihsan Atkia adalah seorang Front-end Developer yang merambah sebagai UI/UX Web Designer, kecintaannya terhadap dunia Desain muncul semasa sekolah menengah atas (SMA), dengan bergabung di komunitas desain, kemudian melanjutkan di salah satu perguruan tinggi negeri di kota Bandung mengambil jurusan Teknik Informatika, aktif di salah satu club yang bernama Ruang Grafis dan menjadi pengurus club tersebut. dan sampai sekarang masih berkecimpung didunia Web Design khususnya bidang Front-end Developer dan UI/UX Web Designer.