วิธีสร้าง Section Counter (นับสถิติ) ด้วย CSS

Section Counter หรือสถิติแสดงตัวเลข (เช่น จำนวนดาวน์โหลด, ลูกค้า, สาขา) เป็น UI Pattern ที่นิยมในหน้า Landing Page ตัวอย่างนี้สร้าง Counter 4 รายการแบบ Responsive ใช้ Font Awesome Icons และ CSS Grid/Float Layout

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

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css">
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif }
    .section {
      float: left;
      width: 25%;
      padding: 0 5px;
    }
    .sectionContainer { margin: 0 -5px; }
    .sectionContainer:after {
      content: "";
      display: table;
      clear: both;
    }
    @media screen and (max-width: 600px) {
      .section {
        width: 100%;
        display: block;
        margin-bottom: 10px;
      }
    }
    .sectionCard {
      box-shadow: 0 4px 8px 0 rgb(127, 16, 172);
      padding: 16px;
      text-align: center;
      background-color: rgb(127, 16, 172);
      color: rgb(255, 255, 255);
    }
    .fa { font-size: 50px; }
  </style>
</head>
<body>
  <h1>Responsive Section Counter Example</h1>
  <br>
  <div class="sectionContainer">
    <div class="section">
      <div class="sectionCard">
        <p><i class="fa fa-mobile" aria-hidden="true"></i></p>
        <h3>100000+</h3>
        <p>Downloads</p>
      </div>
    </div>
    <div class="section">
      <div class="sectionCard">
        <p><i class="fa fa-globe" aria-hidden="true"></i></p>
        <h3>5000+</h3>
        <p>Outlets over the globe</p>
      </div>
    </div>
    <div class="section">
      <div class="sectionCard">
        <p><i class="fa fa-bar-chart" aria-hidden="true"></i> </p>
        <h3>Top Performer</h3>
        <p>In past 5 years</p>
      </div>
    </div>
    <div class="section">
      <div class="sectionCard">
        <p><i class="fa fa-handshake-o" aria-hidden="true"></i></p>
        <h3>3000+</h3>
        <p>Partners</p>
      </div>
    </div>
  </div>
</body>
</html>

โครงสร้าง Layout

• .sectionContainer - Wrapper ใช้ Negative Margin (-5px) ชดเชย Padding ของลูก
• .section - คอลัมน์แต่ละอัน กว้าง 25% (4 คอลัมน์ต่อแถว) Float ซ้าย
• .sectionCard - การ์ดสถิติ พื้นหลังสีม่วง เงา มุมโค้งมน (ไม่ได้ระบุแต่ box-shadow ให้ลักษณะการ์ด)
• @media (max-width: 600px) - เปลี่ยนเป็น 1 คอลัมน์ต่อแถว บนมือถือ

ไอคอน Font Awesome ที่ใช้

• fa-mobile - โทรศัพท์มือถือ (สำหรับ Downloads)
• fa-globe - โลก (สำหรับ Outlets worldwide)
• fa-bar-chart - แผนภูมิ (สำหรับ Top Performer)
• fa-handshake-o - การจับมือ (สำหรับ Partners)

การปรับปรุงสมัยใหม่ (Modern Approach)

ใช้ CSS Grid

.sectionContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}
/* ไม่ต้องใช้ float, clearfix, media query ซับซ้อน */

เพิ่ม Animation นับตัวเลข (Count-up Animation)

.counter {
  /* ใช้ JavaScript หรือ CSS Animation นับจาก 0 ถึงค่าเป้าหมาย */
}

ใช้ Font Awesome 6 (รุ่นใหม่)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
/* แล้วเปลี่ยน class เป็น fa-solid fa-mobile ฯลฯ */

Accessibility Tips

• เพิ่ม aria-hidden="true" ให้ไอคอน (ทำแล้วในตัวอย่าง)
• ใช้ <span class="sr-only"> สำหรับ Screen Readers อธิบายความหมายตัวเลข
• คอนทราสต์สีพื้นหลัง/ตัวอักษร ต้องผ่าน WCAG AA (4.5:1)