Css Sprite Oluşturucu

Combines multiple uploaded images (PNG, JPEG, or SVG) into a single PNG sprite sheet rendered on a canvas, and emits matching CSS background-position rules. Three layouts are offered: horizontal, vertical, and packed (row-wrap). Optional pixel padding can be inserted between sprites.

1. Click the upload dropzone or drag image files onto it. PNG, JPEG, and SVG are accepted; non-image files are filtered out. 2. Pick a Layout (Horizontal, Vertical, Packed) and optional Padding in pixels (0-100). 3. Click Generate. A sprite preview appears on a checkerboard background. 4. Click Download to save sprite.png, and use Copy CSS to copy the generated CSS rules.

Yatay düzen, görselleri en yüksek görselin yüksekliğine eşit olan tek bir satırda soldan sağa sıralar. Dikey düzen ise görselleri en geniş görselin genişliğine eşit olan bir sütunda yukarıdan aşağıya yığar. Paketlenmiş düzen, ceil(sqrt(count)) ile elde edilen genişlik değeri üzerinden en geniş görselin genişliği kadar olan aralıklarla satırlara bölünür. Oluşturulan CSS, her görsel için width, height değerleri, ‘background: url(sprite.png) no-repeat’ ifadesi ve negatif bir background-position değeri içeren bir ‘.icon-<name>’ sınıfı oluşturur. Dosya adlarındaki uzantılar kaldırılır ve yalnızca [a-zA-Z0-9_-] karakterleri kalacak şekilde temizlenir.