Nhưng có một nhược điểm là để sử dụng được Image Sprites bạn phải có kiến thức Photoshop nhất định để tạo thành file ảnh và tính toán vị trí của các thành phần ảnh.
Hôm nay tôi sẽ hướng dẫn bạn sử dụng SpriteMe để tạo Image Sprites một cách nhanh chóng và chính xác nhất.
SpireMe là trang web hỗ trợ bạn tạo CSS Sprite một cách nhanh nhất, chức năng chính của SpriteMe:
- Gộp các file ảnh nền tương đồng thành một file để sử dụng Image Spire
- Export mã CSS
Sử dụng SpriteMe
2, Kéo thả liên kết SpriteMe vào thanh Bookmark của trình duyệt (Bạn nên sử dụng Firefox để SpriteMe có thể hoạt động tốt nhất).
3, Truy cập vào trang mà bạn muốn tạo Image Sprites (Đương nhiên là trang có sử dụng các ảnh nền – Tôi thử nghiệm với Báo Dân Trí). Chờ trang tải xong và nhấn liên kết SpireMe trên thanh Bookmark
4, Sprite sẽ đưa ra danh sách các ảnh tương đồng để tạo thành Image Spire, Bạn có thể nhận Chọn Make Sprite hoặc Make All để tạo
Sau khi nhấn Make Sprite bạn sẽ nhận được file ảnh do SpriteMe cung cấp
5, Export CSS
Click Export CSS để lấy Mã CSS
Sau khi nhấn Export, SpriteMe cung cấp cho bạn đường dẫn để Download file ảnh đã được tạo, bạn có thể sử dụng trực tiếp đường link do SpriteMe cung cấp hoặc download về và Upload lên host của bạn.
SpriteMe cung cấp mã CSS cùng với các Class tương ứng và tên file CSS cần chỉnh sửa
Phần mã CSS bị gạch ngang là những mã CSS cũ khi chưa sử dụng CSS Image Sprites.
Phần In đậm là mã CSS mới để bạn thay thế.
KẾT LUẬN
Với SpriteMe bạn có thể dễ dàng tạo ra Image Sprite một cách nhanh chóng mà không cần phải biết Photoshop, không mất thời gian để căn chỉnh background-position.
Nhưng nói qua thì cũng phải nói lại, SpriteMe hỗ trợ công việc của bạn đạt hiệu quả hơn, nhưng bạn cũng nên biết cách thức hoạt động và cách tạo ra Image Sprite như thế nào, đó mới là những gì bạn cần, và tôi mong thế.