Hiệu ứng Grayscale (Thang độ xám) với CSS Filter (Legacy)

Bộ lọc Gray - Microsoft Legacy Filter

Cảnh báo: Filter: Gray là **Microsoft proprietary filter (IE 4-9)**, **đã lỗi thời**.

Tham số cũ (chỉ IE)

Thay thế hiện đại: CSS filter: grayscale()

Chuẩn CSS Filter Effects Module Level 1:

Cú pháp

.grayscale-full { filter: grayscale(100%); }  /* Đen trắng hoàn toàn */
.grayscale-half { filter: grayscale(50%); }   /* Nửa màu nửa xám */
.grayscale-off { filter: grayscale(0%); }     /* Màu bình thường (mặc định) */

Ví dụ hoàn chỉnh hiện đại

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo { display: inline-block; margin: 20px; }
    
    .original { filter: none; }
    .gray-100 { filter: grayscale(100%); }
    .gray-50 { filter: grayscale(50%); }
    
    /* Text grayscale */
    .text-gray {
      display: inline-block;
      filter: grayscale(100%);
      font: 30pt 'Arial Black';
      color: red; /* Sẽ hiển thị thành màu xám */
    }
    
    /* Hover effect: màu → đen trắng */
    .hover-gray:hover {
      filter: grayscale(100%);
      transition: filter 0.3s ease;
    }
  </style>
</head>
<body>
  <img src="logo.png" alt="Gốc" class="demo original">
  <img src="logo.png" alt="Grayscale 100%" class="demo gray-100">
  <img src="logo.png" alt="Grayscale 50%" class="demo gray-50">
  
  <p>Text Example:</p>
  <div class="text-gray">CSS Tutorials</div>
  
  <p>Hover để xem hiệu ứng:</p>
  <img src="colorful.jpg" alt="Hover me" class="demo hover-gray">
</body>
</html>

Kết hợp nhiều filter

.vintage-photo {
  filter: grayscale(80%) sepia(30%) contrast(1.2) brightness(0.9);
  /* Áp dụng theo thứ tự: grayscale → sepia → contrast → brightness */
}

Hỗ trợ trình duyệt

• Chrome 53+, Firefox 35+, Safari 9.1+, Edge 12+
• IE: Không hỗ trợ (cần polyfill)
• Mobile: Hỗ trợ tốt iOS Safari 9.3+, Chrome Android 53+