Tạo CSS sprite

Công cụ này làm gì

Công cụ tạo CSS sprite ghép một bộ biểu tượng hoặc ảnh nhỏ thành một sprite sheet duy nhất và viết CSS để hiển thị từng ảnh. Thêm tệp PNG, SVG, GIF hoặc JPG, chọn cách sắp xếp, rồi tải xuống ảnh sprite PNG cùng một stylesheet có một class cho mỗi ảnh.

Tên class lấy từ tên tệp: Home Icon.png trở thành .icon-home-icon, và tên trùng nhau sẽ được thêm số. Bố cục Xếp gọn dùng thuật toán bin packing để đặt các ảnh có kích thước khác nhau lên sheet nhỏ nhất; Dọc, Ngang và Lưới cho vị trí dễ đoán.

Cách sử dụng

1. Nhấn Thêm ảnh… và chọn các biểu tượng của bạn (hoặc bắt đầu từ bộ ảnh ví dụ).
2. Chọn Bố cục và Khoảng đệm. Một chút khoảng đệm giúp các biểu tượng cạnh nhau không lem sang nhau khi trình duyệt co giãn chúng.
3. Đặt Tiền tố class và Tên tệp sprite dùng trong background-image.
4. Chọn @2x nếu ảnh của bạn được vẽ ở kích thước gấp đôi cho màn hình retina.
5. Nhấn Tải PNG và Tải CSS (hoặc Sao chép ảnh để dán sprite vào công cụ thiết kế hay khung chat), tải cả hai lên máy chủ, rồi dùng các class: <span class="icon icon-home"></span>.

Ví dụ

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

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

Mẹo

• Gom các biểu tượng thường thay đổi cùng nhau vào một sprite; tạo lại sheet sẽ làm thay đổi mọi vị trí.
• Với biểu tượng một màu cần đổi màu bằng CSS, icon font SVG hoặc SVG nội tuyến có thể phù hợp hơn.