CSS Sprite Image Generator

29/10/2014    Aulia Rahmah Alhafidz    649     Artikel Bebas

Jika kemarin sudah dibahas mengenai CSS Sprite Image, yang bisa digunakan agar mempercepat loading website, tetapi dengan membahas cara membuatnya langsung dengan CSS dan gambar yang sudah siap pakai. Nah, sekarang akan saya beri tips dan trik untuk membuat gambarnya tanpa perlu Photoshop dan tanpa perlu CSS untuk mencari posisinya.

Sebagai contoh disini ada beberapa gambar yang akan dijadikan sprite image.

CSS-Sprite-Image-Generator

Gambar di atas akan kita satukan dan kita buat menjadi sprite image beserta CSSnya. Setelah gambar siap, folder gambar tersebut kita jadikan zip.

CSS-Sprite-Image-Generator

Setelah dijadikan zip, buka halaman website berikut : http://spritegen.website-performance.org/ . Jika terlihat bagian seperti di bawah ini, upload zip yang sudah dibuat dan klik Create Sprite Image & CSS.

CSS-Sprite-Image-Generator

Setelah selesai, kita akan mendapatkan kode CSS dan gambarnya sekaligus. Paket lengkap bukan? :D

CSS-Sprite-Image-Generator

Kode CSSnya bisa langsung kita copy paste ke editor yang sedang digunakan. Untuk mengambil gambar, klik Download Sprite Image.

Dan inilah hasil gambarnya :

CSS-Sprite-Image-Generator

Semoga bermanfaat ya :)

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More