CSS Sprite Oluşturucu

Birden çok yüklenen görseli tek bir PNG sprite sayfasında birleştirir ve eşleşen background-position CSS'ini üretir. Üç düzen desteklenir (yatay, dikey ve ızgara), parçalar arasında isteğe bağlı dolgu ve ızgara düzeni için yapılandırılabilir bir sütun sayısı vardır. Tüm birleştirme tarayıcınızda bir tuval üzerinde gerçekleşir; hiçbir görsel hiçbir yere yüklenmez.

1. Yükleme alanına tıklayın veya görsel dosyalarını üzerine sürükleyerek ekleyin (birden çok dosya desteklenir). 2. Bir düzen seçin (yatay, dikey, ızgara) ve ızgara için sütun sayısını ayarlayın. 3. İsteğe bağlı olarak parçalar arasında piksel cinsinden dolgu ayarlayın. 4. Sayfayı yeniden oluşturmak için Generate Sprite'a tıklayın, ardından PNG için Download Sprite'a ve .icon-* kuralları için Copy CSS'e tıklayın.

yatay (horizontal), en yüksek görseli satır yüksekliği olarak kullanarak görselleri soldan sağa istifler. dikey (vertical), en geniş görseli sütun genişliği olarak kullanarak yukarıdan aşağıya istifler. ızgara (grid), görselleri her sütun ve satırın en büyük üyesine göre boyutlandırıldığı sütun öncelikli bir ızgaraya yerleştirir. Üretilen CSS, dosya adından türetilen sınıf adlarını kullanır (uzantı kaldırılır, alfasayısal olmayan karakterler - ile değiştirilir), ör. .icon-home { width; height; background: url('sprite.png') no-repeat; background-position: -Xpx -Ypx; }. Çıktı PNG'si canvas.toDataURL aracılığıyla dışa aktarılır ve girdi formatından bağımsız olarak her zaman PNG'dir.