Prak 07 – Membuat CSS Spritesheet

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

Jelaskan yang dimaksud dengan CSS SpriteSheet!

Jelaskan kelebihan dari CSS SpriteSheet!

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. Hasil Praktikum

7. Referensi

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