DevToolPal
ID

Generator CSS Sprite

Gabungkan ikon menjadi satu sprite sheet PNG dan dapatkan class CSS background-position untuk setiap gambar.

Berjalan lokal, tidak pernah diunggah

Opsi

Gambar sumber

Gambar (0)

Tambahkan gambar PNG, SVG, GIF, atau JPG. Tidak ada yang diunggah.

Sprite

CSS

Fungsi alat ini

Generator CSS Sprite menggabungkan sekumpulan ikon atau gambar kecil menjadi satu sprite sheet dan menuliskan CSS untuk menampilkan masing-masing. Tambahkan file PNG, SVG, GIF, atau JPG, pilih cara menyusunnya, lalu unduh sprite PNG beserta stylesheet yang berisi satu class per gambar.

Nama class diambil dari nama file: Home Icon.png menjadi .icon-home-icon, dan nama yang sama akan diberi angka. Tata letak Padat memakai bin packing untuk menempatkan gambar berbagai ukuran di sheet sekecil mungkin; Vertikal, Horizontal, dan Grid memberikan posisi yang mudah ditebak.

Cara menggunakannya

  1. Tekan Tambah gambar… dan pilih ikon Anda (atau mulai dari set contoh).
  2. Pilih Tata letak dan Padding. Sedikit padding mencegah ikon yang bersebelahan saling bocor saat browser menskalakannya.
  3. Atur Prefiks class dan Nama file sprite yang dipakai di background-image.
  4. Pilih @2x jika gambar Anda digambar dua kali lipat ukurannya untuk layar retina.
  5. Tekan Unduh PNG dan Unduh CSS (atau Salin gambar untuk menempelkan sprite ke alat desain atau chat), unggah keduanya, lalu gunakan class-nya: <span class="icon icon-home"></span>.

Contoh

.icon {
  display: inline-block;
  background-image: url("sprite.png");
  background-repeat: no-repeat;
}

.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

Tips

  • Simpan ikon yang berubah bersamaan di satu sprite; membuat ulang sheet akan mengubah semua posisi.
  • Untuk ikon satu warna yang perlu berganti warna lewat CSS, icon font SVG atau SVG inline mungkin lebih cocok.

FAQ

› Apa itu CSS sprite?

Satu gambar yang berisi banyak gambar kecil. Setiap ikon ditampilkan dengan menjadikan sprite sebagai background sebuah elemen lalu menggesernya dengan background-position, sehingga halaman cukup membutuhkan satu request, bukan puluhan.

› Apakah sprite masih berguna dengan HTTP/2?

Tidak sepenting dulu, tetapi masih membantu untuk banyak ikon kecil, template email, game, dan proyek lama, serta mencegah ikon berkedip karena dimuat satu per satu.

› Apa fungsi opsi @2x?

Jika gambar sumber Anda digambar dua kali ukuran tampilan, CSS akan membagi dua setiap lebar, tinggi, dan posisi serta menambahkan background-size, sehingga ikon tetap tajam di layar berkerapatan tinggi.

› Apakah gambar saya diunggah?

Tidak. Sprite digambar di browser Anda dengan canvas dan CSS dibuat secara lokal.