CSS Sprite Oluşturucu

Bu araç ne işe yarar

CSS Sprite Oluşturucu, bir grup simgeyi veya küçük görseli tek bir sprite sheet’te birleştirir ve her birini göstermek için gereken CSS’i yazar. PNG, SVG, GIF veya JPG dosyaları ekleyin, nasıl yerleştirileceklerini seçin ve sprite PNG’sini, her görsel için bir sınıf içeren stil dosyasıyla birlikte indirin.

Sınıf adları dosya adlarından gelir: Home Icon.png, .icon-home-icon olur ve yinelenen adlara bir sayı eklenir. Sıkıştırılmış yerleşim, farklı boyutlardaki görselleri en küçük sayfaya yerleştirmek için bin packing kullanır; Dikey, Yatay ve Izgara ise öngörülebilir konumlar verir.

Nasıl kullanılır

1. Görsel ekle… düğmesine basın ve simgelerinizi seçin (veya örnek setle başlayın).
2. Bir Yerleşim ve Boşluk seçin. Biraz boşluk, tarayıcı simgeleri ölçeklerken komşu simgelerin birbirine taşmasını önler.
3. Sınıf ön eki ile background-image içinde kullanılan Sprite dosya adı’nı ayarlayın.
4. Görselleriniz retina ekranlar için iki kat boyutta çizilmişse @2x seçeneğini belirleyin.
5. PNG indir ve CSS indir düğmelerine basın (sprite’ı bir tasarım aracına veya sohbete yapıştırmak için Görüntüyü kopyala), ikisini de sunucunuza yükleyin ve sınıfları kullanın: <span class="icon icon-home"></span>.

Örnek

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

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

İpuçları

• Birlikte değişen simgeleri tek bir sprite’ta tutun; sayfayı yeniden oluşturmak tüm konumları değiştirir.
• CSS ile renk değiştirmesi gereken tek renkli simgeler için bir SVG simge yazı tipi veya satır içi SVG daha uygun olabilir.