Membuat CSS Spritesheet
1. Tujuan
Mengenal dan membuat CSS Spritesheet dari kumpulan gambar.
2. Alat dan Bahan
Adobe Photoshop
3. Dasar Teori
CSS Sprite
Teknik css sprite adalah teknik untuk menggabungkan beberapa images menjadi satu supaya dalam pemanggilan images hanya satu yang dipanggil meski yang digunakan adalah images yang berbeda sekaligus mengurangi permintaan http://.
Untuk membuat CSS Sprite, yang harus diperhatikan adalah posisi gambar (background-position), ukuran gambar (width - height), dan pengulangan gambar (background-repeat). Posisi dan ukuran gambar nantinya akan menentukan peletakan gambar, sedangkan pengulangan gambar akan berpengaruh terhadap tampilan gambar yang dihasilkan. Untuk itu gunakan CSS Sprite ini pada gambar - gambar yang tidak diulang (no-repeat)
Kelebihan CSS Sprite
4. Tugas
A. Mencari royalti free assets atau CC (Creative Commons)
carilah kumpulan gambar yang bersifat royalti free dengan kategori berikut:
1. pin point marker
2. shadow
3. surf board
4. gambar pantai dengan langit dihapus
5. gambar langit dengan awan
6. gambar berisi tulisan
1. pin point marker
2. shadow
3. surf board
4. gambar pantai dengan langit dihapus
5. gambar langit dengan awan
6. gambar berisi tulisan
B. Gabung 6 gambar tersebut dalam 1 gambar dengan format PNG with transparency
C. Buat file CSS yang berisi definisi spritesheet dari gambar tersebut
D. Buat file HTML untuk mengecek CSS Spritesheet yang dibuat
Praktikum 7 - Membuat CSS Spitesheet