CSS Grayscale Effect: แปลงเป็นโทนสีเทา (Legacy IE Filter)

Grayscale Effect (IE Legacy)

เอฟเฟกต์ Grayscale เป็นฟิลเตอร์เก่าของ Internet Explorer แปลงสีของออบเจกต์เป็น 256 ระดับสีเทา

พารามิเตอร์

ตัวอย่างการใช้งาน

<html>
<head></head>
<body>
  <img src="/css/images/logo.png" alt="CSS Logo" style="filter: Gray">
  
  <p>Text Example:</p>
  <div style="
    width: 357px; height: 50px;
    font-size: 30pt; font-family: Arial Black;
    color: red; filter: Gray
  ">CSS Tutorials</div>
</body>
</html>

⚠️ สำคัญ: เฉพาะ Internet Explorer

เป็น Microsoft proprietary filter ไม่ใช่มาตรฐาน W3C

ทางเลือกมาตรฐาน (Modern CSS)

/ CSS Filter มาตรฐาน /
.grayscale {
  filter: grayscale(100%);  /* 100% = ขาวดำเต็ม, 50% = ครึ่งสี */
}

.grayscale-hover:hover {
  filter: grayscale(0%);  /* คืนสีตอน hover */
  transition: filter 0.3s;
}

/* ร่วมกับ filter อื่น */
.vintage {
  filter: grayscale(100%) sepia(50%) contrast(1.2);
}

/* SVG Filter */

การใช้งานจริง

• รูปภาพแบบเก่า (vintage/old photo)
• Disabled state ของปุ่ม/รูป
• Hover effect: ขาวดำ → สี
• Print stylesheet