CSS Invert Effect: สลับสีเป็นภาพลบ (Legacy IE Filter)

Invert Effect (IE Legacy)

เอฟเฟกต์ Invert เป็นฟิลเตอร์เก่าของ Internet Explorer ใช้สลับสีขององค์ประกอบเป็นค่าตรงข้ามในสเปกตรัมสี (สร้างภาพลบ / negative image)

พารามิเตอร์

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

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

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

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

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

/ CSS Filter มาตรฐาน (รองรับทุกเบราว์เซอร์) /
.invert {
  filter: invert(100%);  /* 100% = กลับสีทั้งหมด, 50% = สีเทา */
}

/* ร่วมกับ filter อื่นๆ */
.invert-sepia {
  filter: invert(100%) sepia(100%) hue-rotate(180deg);
}

/* SVG Filter สำหรับควบคุมละเอียด */

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

• Dark mode: filter: invert(100%) hue-rotate(180deg) (ปรับหรือไม่ให้ภาพดูถูกต้อง)
• High contrast mode
• Creative effects