1. Tujuan

Mengenal dan membuat CSS Spritesheet dari kumpulan gambar.

2. Alat

Adobe Photoshop / Gimp / Preview / Power Point

3. Bahan

royalti free image

4. Dasar Teori

Gunakan pertanyaan berikut untuk menuliskan dasar teori yang relevan

1. Jelaskan yang dimaksud dengan CSS SpriteSheet!
2. Jelaskan kelebihan dari CSS SpriteSheet!
3. Bagaimana cara membuat CSS SpriteSheet?

5. Tugas Praktikum

berikut adalah beberapa tugas praktikum yang harus dikerjakan

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

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

6. Petunjuk Praktikum

Berikut adalah cara membuat file CSS untuk sebuah spritesheet
1. Menggabungkan kumpulan gambar dalam satu file

1. Membuat file CSS untuk spritesheet

7. Hasil Praktikum

Tampilkan screen record dari praktikum ini

8. Kesimpulan

Tuliskan hal-hal yang diperoleh dari praktikum ini

9. Referensi

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them