home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

การสร้าง Navigation Menu ด้วย CSS Image Sprite

CSS Image Sprite: รวมหลายรูปในไฟล์เดียว ลด HTTP Requests

Image Sprite = รวมไอคอน/รูปเล็กหลายตัวในรูปภาพใหญ่ 1 ไฟล์ ใช้ background-position แสดงเฉพาะส่วนที่ต้องการ ลด request เร็วขึ้น

โค้ดตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 0px; }
    span { width: 200px; height: 300px; background-color: black; }
    nav { background-color: black; height: 50px; padding-top: 15px; padding-left: 10px; }
    nav a { font-size: 20px; color: white; text-decoration: none; margin-right: 10px; }
    .home { width: 32px; height: 32px; background: url("css_sprites.png") -62px -62px; }
    .search { width: 32px; height: 32px; background: url("css_sprites.png") -10px -62px; }
    .phone { width: 32px; height: 32px; background: url("css_sprites.png") -62px -10px; }
    .user { width: 32px; height: 32px; background: url("css_sprites.png") -10px -10px; }
  </style>
</head>
<body>
  <nav>
    <img class="home" /> <a href="">HOME</a>
    <img class="phone" /> <a href="">Call Us</a>
    <img class="user" /> <a href="">Our Team</a>
    <img class="search" /> <a href="">Search</a>
  </nav>
  <h1> Main content here </h1>
  <p>Lorem ipsum...</p>
</body>
</html>

จุดสังเกตจากโค้ด

  • ใช้ <img> tag ว่าง พร้อม class สำหรับ background sprite – ควรใช้ <span> หรือ <i> แทน (semantic)
  • background-position: -62px -62px – ลบตำแหน่ง X, Y ใน sprite sheet
  • Sprite sheet ต้องวัดพิกเซลละเอียด – ใช้เครื่องมือช่วย

วิธีทันสมัยแทน Sprite

  • SVG Sprites / Symbols – <svg><symbol id="icon">...</symbol></svg> ใช้ <use xlink:href="#icon"> – scalable, styleable, accessible
  • Icon Fonts (Font Awesome, Material Icons) – ใช้เหมือนฟอนต์
  • HTTP/2 + HTTP/3 – Multiplexing ทำให้ multiple requests ไม่ช้าอีกต่อไป Sprite ไม่ได้สำคัญเท่าเดิม
  • CSS Mask / Mask-image – ใช้รูปเดียว mask สีต่างๆ

เครื่องมือสร้าง Sprite