Tạo hiệu ứng X-Ray (làm phẳng độ sâu màu) với CSS

Giới thiệu

Hiệu ứng X-Ray chuyển hình ảnh sang thang độ xám (grayscale) và làm phẳng độ sâu màu. Lưu ý quan trọng: Thuộc tính filter: Xray trong ví dụ gốc là không chuẩn và chỉ hoạt động trên IE cũ (Microsoft proprietary filter). CSS hiện đại dùng filter: grayscale(100%) hoặc SVG filter.

Cách làm hiện đại (Khuyến nghị)

<!DOCTYPE html>
<html>
<head>
  <style>
    .xray-effect {
      filter: grayscale(100%) contrast(150%);
      -webkit-filter: grayscale(100%) contrast(150%);
      transition: filter 0.3s ease;
    }
    .xray-effect:hover {
      filter: grayscale(0%) contrast(100%);
    }
  </style>
</head>
<body>
  <img src="/css/images/logo.png" alt="CSS Logo" class="xray-effect">
  
  <div class="xray-text">
    CSS Tutorials
  </div>
  
  <style>
    .xray-text {
      width: 357px;
      height: 50px;
      font-size: 30pt;
      font-family: 'Arial Black', sans-serif;
      color: red;
      filter: grayscale(100%) contrast(150%);
    }
  </style>
</body>
</html>

So sánh các phương pháp

Mở rộng: Tạo hiệu ứng X-Ray thật sự với SVG Filter

<svg style="display:none;">
  <filter id="xray">
    <feColorMatrix type="matrix" values="
      0.3 0.6 0.1 0 0
      0.3 0.6 0.1 0 0
      0.3 0.6 0.1 0 0
      0   0   0   1 0"/>
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0 1"/>
      <feFuncG type="table" tableValues="0 1"/>
      <feFuncB type="table" tableValues="0 1"/>
    </feComponentTransfer>
  </filter>
</svg>

<style>
  .true-xray { filter: url(#xray); }
</style>

Ứng dụng

• Hiệu ứng hover cho gallery ảnh
• Trạng thái disabled cho button/image
• Thiết kế "night mode" hoặc high contrast
• Preview trạng thái in ấn (grayscale proof)