CSS Sprite Oluşturucu

İkon dosyalarınızı yükleyin; tek PNG sprite görseli ve her ikon için background-position CSS'i üretilsin.

Aracı kullanmak için JavaScript gerekli — bu sayfa yüklenirken otomatik açılır.

Nasıl Kullanılır?

  1. İkon/görsellerinizi yükleyin (en az 2).
  2. Yatay veya dikey yerleşim seçin.
  3. Sprite PNG'sini ve CSS kodunu alın.

Sık Sorulan Sorular

CSS sprite neden kullanılır?

Onlarca küçük ikonu tek istekte yükleyerek HTTP isteği sayısını azaltır ve siteyi hızlandırır.

CSS nasıl kullanılır?

Üretilen .sprite sınıfını elementinize ekleyin, ikon sınıfıyla konumu belirtin.

Diğer Ücretsiz Araçlar

Tüm işlemler tarayıcınızda gerçekleşir; dosyalarınız hiçbir sunucuya yüklenmez.