เครื่องมือนี้ทำอะไรได้
ตัวสร้าง CSS Sprite รวมชุดไอคอนหรือรูปเล็ก ๆ เป็น sprite sheet เดียว และเขียน CSS สำหรับแสดงแต่ละรูป เพิ่มไฟล์ PNG, SVG, GIF หรือ JPG เลือกวิธีจัดวาง แล้วดาวน์โหลด sprite PNG พร้อมสไตล์ชีตที่มีหนึ่งคลาสต่อหนึ่งรูป
ชื่อคลาสมาจากชื่อไฟล์: Home Icon.png จะกลายเป็น .icon-home-icon และชื่อที่ซ้ำกันจะได้ตัวเลขต่อท้าย เลย์เอาต์ อัดแน่น ใช้ bin packing วางรูปขนาดต่าง ๆ ลงบนแผ่นที่เล็กที่สุด ส่วน แนวตั้ง, แนวนอน และ ตาราง ให้ตำแหน่งที่คาดเดาได้
วิธีใช้งาน
- กด เพิ่มรูปภาพ… แล้วเลือกไอคอนของคุณ (หรือเริ่มจากชุดตัวอย่าง)
- เลือก เลย์เอาต์ และ ระยะห่าง ระยะห่างเล็กน้อยช่วยป้องกันไม่ให้ไอคอนข้างเคียงล้นเข้าหากันเมื่อเบราว์เซอร์ย่อขยาย
- ตั้ง คำนำหน้าคลาส และ ชื่อไฟล์ sprite ที่ใช้ใน
background-image - เลือก @2x หากรูปของคุณวาดไว้ที่ขนาดสองเท่าสำหรับหน้าจอ retina
- กด ดาวน์โหลด PNG และ ดาวน์โหลด CSS (หรือ คัดลอกรูปภาพ เพื่อวางสไปรต์ลงในเครื่องมือออกแบบหรือแชต) อัปโหลดทั้งสองไฟล์ แล้วใช้คลาส:
<span class="icon icon-home"></span>
ตัวอย่าง
.icon {
display: inline-block;
background-image: url("sprite.png");
background-repeat: no-repeat;
}
.icon-home {
width: 32px;
height: 32px;
background-position: 0 0;
}เคล็ดลับ
- เก็บไอคอนที่เปลี่ยนพร้อมกันไว้ใน sprite เดียวกัน เพราะการสร้างแผ่นใหม่จะเปลี่ยนตำแหน่งทั้งหมด
- สำหรับไอคอนสีเดียวที่ต้องเปลี่ยนสีด้วย CSS ไอคอนฟอนต์แบบ SVG หรือ inline SVG อาจเหมาะกว่า
คำถามที่พบบ่อย
› CSS sprite คืออะไร?
คือรูปภาพเดียวที่รวมรูปเล็ก ๆ หลายรูปไว้ด้วยกัน แต่ละไอคอนแสดงโดยกำหนด sprite เป็นพื้นหลังของ element แล้วเลื่อนด้วย background-position หน้าเว็บจึงใช้คำขอเดียวแทนหลายสิบคำขอ
› Sprite ยังมีประโยชน์อยู่ไหมเมื่อใช้ HTTP/2?
น้อยกว่าเมื่อก่อน แต่ยังช่วยได้สำหรับไอคอนจิ๋วจำนวนมาก เทมเพลตอีเมล เกม และโปรเจกต์เก่า และช่วยหลีกเลี่ยงอาการไอคอนกะพริบโหลดทีละตัว
› ตัวเลือก @2x ทำอะไร?
หากรูปต้นฉบับวาดไว้ที่ขนาดสองเท่าของขนาดแสดงผล CSS จะหารความกว้าง ความสูง และตำแหน่งทั้งหมดลงครึ่งหนึ่ง และเพิ่ม background-size ไอคอนจึงคมชัดบนหน้าจอความละเอียดสูง
› รูปของฉันถูกอัปโหลดหรือไม่?
ไม่ Sprite ถูกวาดในเบราว์เซอร์ของคุณด้วย canvas และ CSS ถูกสร้างในเครื่อง