CSS Invert Effect: สลับสีเป็นภาพลบ (มาตรฐานและ Legacy)

Invert Effect

เอฟเฟกต์ Invert ใช้สลับสีของออบเจกต์เป็นค่าตรงข้ามในสเปกตรัมสี สร้างภาพลบ (negative image) มีทั้งรูปแบบ IE Legacy และ CSS Filter มาตรฐาน

รูปแบบ IE Legacy (Deprecated)

filter: invert;

รูปแบบมาตรฐาน CSS Filter (แนะนำ)

.invert-full { filter: invert(100%); }
.invert-half { filter: invert(50%); }  /* สีเทา */
.invert-custom { filter: invert(75%); }

ตัวอย่างการใช้งาน (รองรับทุกเบราว์เซอร์)

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

การประยุกต์ใช้งานจริง

1. Dark Mode เร็วๆ (Quick Dark Mode)

.dark-mode-quick {
  filter: invert(100%) hue-rotate(180deg);
  /* hue-rotate(180deg) ช่วยแก้ไขสีให้ดูถูกต้องกว่า */
}

2. High Contrast Mode

.high-contrast {
  filter: invert(100%) contrast(200%);
}

3. Hover Effect

.img-invert:hover {
  filter: invert(100%);
  transition: filter 0.3s ease;
}

ค่าที่เป็นไปได้

• invert(0%) - ปกติ (ค่าเริ่มต้น)
• invert(50%) - สีเทาทั้งหมด (mid-gray)
• invert(100%) - สลับสีทั้งหมด (negative)
• รองรับค่าระหว่าง 0-100%