CSS Asyik - Belajar Bikin Web Makin Asyik dengan CSS

Metode kali ini lumayan rumit jika tidak memahaminya dengan baik tapi kalau sudah paham akan menguntungkan banyak pihak. Dari sisi desainer, CSS Sprites dapat menghemat waktu cukup banyak dalam pembuatan background image. Dan dari sisi developer, background image yang digunakan untuk CSS Sprites memiliki ukuran file yang lebih kecil daripada total beberapa image digabung menjadi satu.

Mengapa CSS Sprites?

Ilustrasi konkritnya dapat dilihat pada screenshot berikut ini:

Di sebelah kiri adalah info dari 11 image yang digabung menjadi satu image, sedangkan di sebelah kanan adalah info gabungan dari 11 image. File CSS Sprites hanya memakan 4KB! Jauh lebih kecil dari gabungan ke-sebelas image tersebut (45KB) – dengan asumsi setiap image rata-rata 4KB besarnya dan file CSS Sprites dibuat menggunakan image editing yang dioptimasi untuk gambar web.

Tentunya dari sisi loading juga jauh lebih cepat, karena hanya membutuhkan sekali antrian dalam rendering halaman web. Bandingkan jika setiap image harus loading satu-persatu:

Mempersiapkan Gambar untuk CSS Sprites

Untuk tutorial kali ini saya mengambil icon dari Famfamfam icon oleh Mark James. Library iconnya sangat lengkap dan kira-kira hampir separuh aplikasi open source di dunia menggunakannya . Ukuran icon yang digunakan adalah 16 x 16 pixels.

Kemudian gunakan image editor semacam GIMP atau Photoshop untuk membuat gambar berlatar transparan. Tahap-tahapnya adalah sebagai berikut:

1. Tahap pertama adalah menyatukan 11 icon tersebut menjadi satu gambar memanjang kebawah, maka minimal tinggi gambarnya adalah 11 x 16 pixel = 176 pixel.
2. Supaya gambar tidak tumpang tindih, tiap icon diberi jarak, misalnya 2 pixel. Posisikan masing-masing icon seperti ilustrasi dibawah ini:
   

Hasilnya akan menjadi seperti gambar berikut (ukuran total: (16+2) x 11 = 196 pixels):

Kode CSS Untuk CSS Sprites

Di dalam penerapannya, satu hal yang perlu diketahui adalah: “hanya satu gambar yang ingin kita tampilkan”. Ide tersebut dapat diterapkan dengan cara membatasi sudut pandang pengunjung terhadap gambar yang ingin ditampilkan. Oleh karena itu, property-property CSS yang akan kita gunakan adalah: width, height, display, dan background.

Contoh penerapannya, sebagai berikut:

1
2
3
4
5
6

.csssprites {
	background: url(../image/css_sprites.png) no-repeat 0 -18px;
	width: 16px;
	height: 16px;
	display: block;
}

Penjelasannya sebagai berikut:

background, untuk mengimpor image ke dalam tag yang diberi kelas tersebut. No-repeat artinya gambar tidak akan tampil berulang-ulang. Dua digit dibelakangnya adalah posisi background tersebut. Angka pertama menunjukkan posisi dari kiri (Left) dan angka kedua menunjukkan posisi dari atas (Top). Angka negatif untuk (Top) menunjukkan bahwa posisi gambar akan bergeser berlawanan arah dari sisi atas (Top) tag.

width dan height, untuk membatasi ukuran tag sehingga background yang terlihat pun hanya sebatas yang diinginkan.

display, untuk memberikan penegasan bahwa tag tersebut adalah “block”, sehingga properti width dan height dapat berfungsi.

Hasilnya bisa diilustrasikan seperti gambar dibawah ini:

Sementara untuk kode HTML nya, anda bisa menggunakan tag span atau div karena keduanya tidak memiliki nilai margin bawaan dari nilai default.

1

<span class="csssprites">&nbsp;</span>

Menggunakan Prinsip Specificity

CSS Specificity juga dapat digunakan untuk mempermudah menggunakan CSS Sprites. Prinsipnya bisa dipelajari di artikel sebelumnya. Idenya adalah menggunakan specificity untuk menghindari penulisan property yang sama secara berulang-ulang. Untuk menggunakan semua icon di dalam gambar ini, property yang harus diubah adalah posisi dari background. Dengan demikian, property yang harus diubah hanyalah background-position.

Penerapannya adalah sebagai berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

.csssprites {
	background: url(../image/css_sprites.png) no-repeat 0 0;
	width: 16px;
	height: 16px;
	display: block;
	float: left;
	margin-right: 2px;
}
.css-1 {
	background-position: 0 0;
}
.css-2 {
	background-position: 0 -18px;
}
.css-3 {
	background-position: 0 -36px;
}
.css-4 {
	background-position: 0 -54px;
}
.css-5 {
	background-position: 0 -72px;
}
.css-6 {
	background-position: 0 -90px;
}
.css-7 {
	background-position: 0 -108px;
}
.css-8 {
	background-position: 0 -126px;
}
.css-9 {
	background-position: 0 -144px;
}
.css-10 {
	background-position: 0 -162px;
}
.css-11 {
	background-position: 0 -180px;
}

Kelas css-1 menandakan bahwa gambar yang muncul adalah gambar yang paling atas. Css-2 menggeser gambar sejauh 18 pixel ke atas, sehingga gambar kedua yang akan muncul. Sedemikian seterusnya sehingga gambar yang paling bawah muncul pada css-11.

Untuk menggunakan kelas yang diinginkan, kode HTML nya adalah:

1
2
3
4
5
6
7
8
9
10
11

<span class="csssprites css-1">&nbsp;</span>
<span class="csssprites css-2">&nbsp;</span>
<span class="csssprites css-3">&nbsp;</span>
<span class="csssprites css-4">&nbsp;</span>
<span class="csssprites css-5">&nbsp;</span>
<span class="csssprites css-6">&nbsp;</span>
<span class="csssprites css-7">&nbsp;</span>
<span class="csssprites css-8">&nbsp;</span>
<span class="csssprites css-9">&nbsp;</span>
<span class="csssprites css-10">&nbsp;</span>
<span class="csssprites css-11">&nbsp;</span>

Tampak dua kelas di dalam satu tag. Kelas pertama, csssprites mendefinisikan bentuk dan background, sementara yang kedua menentukan posisi background. Sehingga akan memunculkan background yang diinginkan!

Hasilnya, CSS Sprites dapat digunakan untuk menghemat penulisan HTML dan mempercepat loading image. CSS Asyik telah menyusun halaman khusus yang dapat didownload untuk memberikan contoh yang lebih jelas mengenai CSS Sprites:

Anda dapat mendownload dan menggunakan HTML+CSS+PSD untuk membuat CSS Sprites dengan mengklik link dibawah ini:

CSS-Sprites.zip

Version: 0.1
Last Updated: November 7, 2009
Size: 102.12 KB