Haftalık Freebies: 12 Ücretsiz CSS Sprite Jeneratörü
CSS resim sprite'ları, sitenizdeki görüntülerin çoğunu veya tamamını tek bir dosyada birleştirerek bir sitedeki HTTP isteklerinin sayısını önemli ölçüde azaltmanıza olanak tanır. Bu dosya daha sonra tek tek görüntüleri uygulamak için CSS arka plan konumlandırma ile birlikte kullanılabilir.
Bu tekniğin dezavantajı, görüntülerinizin manuel olarak birleştirilmesini ve her görüntünün düzgün bir şekilde görüntülenmesini sağlamak için CSS ile uğraşmanızı gerektiren özenli ve ilgili bir süreç olmasıdır. Neyse ki, bu işlemi tamamen otomatik hale getiren bir dizi ücretsiz çevrimiçi araç var. Bugün, her biri sprite oluşturma sürecini kendine özgü bir şekilde ele alan bu araçlardan on ikiden oluşan harika bir koleksiyona sahibiz. İster bir görüntü klasöründen hareketli grafik oluşturmak veya mevcut bir siteyi dönüştürmek isteyin, işi saniyeler içinde halletmenize yardımcı olacak araçlara sahibiz.
CSS Sprite Üreticisi: Proje Fondü
Bol seçenekli iyi bir jeneratör. Bir hareketli grafiğe dönüştürülmesini istediğiniz tüm resimlerin bir .ZIP dosyasını yüklersiniz ve gerisini halleder. Bir görüntü ve ihtiyacınız olan çeşitli “arka plan konumu” değerlerinin tümünü verir.
CSS Sprite oluşturucu
Çirkin ve buggy, bu hareketli grafik oluşturucu sizi her görüntüyü ayrı ayrı yüklemeye zorlar. Ne düşündüğünüzü görmek için deneyin ama dürüst olmak gerekirse, bu listede daha iyi alternatifler var.
CSS Spriteları - Çevrimiçi CSS Sprite Oluşturucu / Oluşturucu
Bu çok hoş. Bir kerede kolayca bir grup görüntü yükleyebilir, çıktı dosya türünüzü seçebilir ve hatta sonuç olarak Sass ve CSS kodlarını almayı seçebilirsiniz. Doygunluğu azaltılmış ve ters çevrilmiş gibi fareyle üzerine gelme efektlerini otomatik olarak oluşturmak için bazı düzgün seçenekler de vardır. Genel olarak oldukça etkileyici, kontrol etmeyi unutmayın.
Spritebox - Sprite Görüntüleri'nden CSS Oluştur
Bu, farklı, biraz daha az otomatik bir rota izler. Sizin için hareketli grafik görüntüsü oluşturmak yerine, önceden oluşturulmuş hareketli grafiğinizi yüklemenize ve ortaya çıkan CSS'yi oluşturmak için belirli alanları tanımlamanıza olanak tanır. Photoshop'ta sprite oluşturmayı tercih ederseniz ve kodla ilgili yardım istiyorsanız harika bir araçtır.
Tuval: CSS Sprite Oluşturucu
Bunun için resim yüklüyorsanız, her seferinde bir tane yapmanız gerekir, bu biraz acıdır. Bağlantılarınız varsa, karşılık gelen sınıf adlarına sahip bir listeye yapıştırabilirsiniz ve gitmekte fayda var. Seçenekler arasında dolgu ve arka plan renkleri bulunur. Testlerimde iyi çalıştı, kesinlikle bir göz atmaya değer.
Dikişler - HTML5 hareketli grafik oluşturma aracı
Bu, diğer geliştiricilerin ortaya çıkardığı tüm garip boşaltıcıları kullandıktan sonra harika olan görüntülerde sürüklemenizi sağlar. Bundan sonra görüntüyü almak için bir düğmeyi, CSS'yi almak için başka bir düğmeyi tıklamanız yeterlidir. Neredeyse hiç seçenek yok ve sadece Chrome ve Firefox'ta çalışıyor, ancak hızlı ve basit bir çözüm istiyorsanız mükemmel.
Spritemapper
Bu sadece süper nerds içindir, komut satırından çalıştırdığınız indirilebilir bir sprite jeneratörüdür. Uygulama gerçekten kaygan, sadece mevcut CSS dosyanıza işaret ediyor ve işin geri kalanını yapıyor. Bu, orijinal css ve görüntü dosyalarınıza asabileceğiniz ve bir değişiklik olduğunda bunları yeniden işleyebileceğiniz için uzun vadeli sprite yönetimi sorununu bir çırpıda yapar.
SpriteMe'yi
SpriteMe, tipik geliştirme sürecinizi tamamen tutmanıza izin veren harika bir araçtır. Sayfanızı normalde tek tek resimleri kullanarak yaptığınız gibi oluşturmanız yeterlidir. Ardından, işiniz bittiğinde sayfayı bir tarayıcıda açın ve SpriteMe yer işaretine basın. Bu sayfadaki tüm resimleri yakalar, hareketli grafik oluşturur ve CSS'yi oluşturur. Bu, özellikle mevcut bir siteyi dönüştürüyorsanız yararlıdır.
Spritefy
Spritefy, bir grup dosyayı işlemek için tarayıcıya sürüklemenizi sağlayan başka bir seçenektir. Stitches'te olduğu gibi, gerçekten herhangi bir seçenek yok, ancak sprite ile çalışmaya başlamak için kesinlikle süper hızlı bir yol (yalnızca Chrome ve Firefox).
CSS Sprite Üreticisi
Bu, oluşturma ve kurulum sürecinde birkaç gereksiz adım içerir, bu nedenle diğer alternatiflerin çoğundan birkaç saniye daha uzun sürer, ancak her görüntüyü eklemek için çeşitli snippet'lerle birlikte CSS ve HTML'yi içeren bir ton kod çıkışına sahiptir. div veya span, bağlantı ekleme vb.
SpriteMeister - Otomatik CSS Sprite Oluşturucu
SpriteMeister yukarıdaki SpriteMe'ye çok benzer, sadece daha az otomatiktir. Bir yer işareti kullanmak yerine, her görüntüyü ve geçerli CSS dosyanızı manuel olarak yükler ve ardından güncellenmiş kod ve tek bir görüntüyle bir indirme alırsınız.
Sprite Oluşturan 2.0
Bu, yukarıdaki Spritebox gibi çalışır. Başka bir yerde oluşturduğunuz hareketli grafik görüntüsünü yüklersiniz ve her görüntü için uygun CSS'yi otomatik olarak oluşturmak için basit bir seçim işlemi kullanırsınız.
Sevdim? Paylaş!
Bu haftaki freebies koleksiyonunu beğendiyseniz, sevgiyi paylaşın ve favori sitelerinize bir bağlantı gönderin. İşte istediğiniz gibi kopyalayıp yapıştırmanız için uygun bir snippet!
12 Ücretsiz CSS Sprite Üreticisi: http://goo.gl/NhLNR
