Chương trình tạo hình ảnh CSS (Css Sprite Generator)

Kết hợp nhiều hình ảnh đã tải lên (PNG, JPEG hoặc SVG) thành một sprite sheet PNG duy nhất được vẽ trên canvas và xuất các quy tắc CSS background-position tương ứng. Có ba bố cục được cung cấp: horizontal, vertical và packed (ngắt dòng theo hàng). Có thể chèn khoảng đệm pixel (padding) tùy chọn giữa các sprite.

1. Bấm vào vùng tải lên hoặc kéo thả tệp hình ảnh vào đó. Chấp nhận PNG, JPEG và SVG; các tệp không phải hình ảnh sẽ bị lọc ra. 2. Chọn Layout (Horizontal, Vertical, Packed) và Padding tùy chọn tính bằng pixel (0-100). 3. Bấm Generate. Bản xem trước sprite sẽ xuất hiện trên nền bàn cờ. 4. Bấm Download để lưu sprite.png và dùng Copy CSS để sao chép các quy tắc CSS được tạo ra.

Horizontal đặt các hình ảnh từ trái sang phải trong một hàng duy nhất có chiều cao bằng hình ảnh cao nhất. Vertical xếp chồng chúng từ trên xuống dưới trong một cột có chiều rộng bằng hình ảnh rộng nhất. Packed ngắt dòng theo hàng dựa trên chiều rộng được suy ra từ ceil(sqrt(count)) nhân với hình ảnh rộng nhất. CSS được tạo ra xuất một lớp '.icon-<name>' cho mỗi hình ảnh, với width, height, một khai báo 'background: url(sprite.png) no-repeat' và một background-position âm. Tên tệp được bỏ phần mở rộng và được chuẩn hóa thành [a-zA-Z0-9_-].