home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

การเพิ่มเอฟเฟกต์ Sepia ให้ภาพด้วย CSS3

เพื่อเพิ่มเอฟเฟกต์ Sepia (สีน้ำชา/โบราณ) ให้ภาพด้วย CSS3 ใช้ค่า sepia() สำหรับคุณสมบัติ filter

ตัวอย่าง: sepia 100%

<!DOCTYPE html> <html> <head> <style> img.demo {    filter: sepia(100%); } </style> </head> <body> <h1>Learn Spring Framework</h1> <img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150"> <h1>Learn Spring Framework</h1> <img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150"> </body> </html>

ผลลัพธ์

การเพิ่มเอฟเฟกต์ Sepia ให้ภาพด้วย CSS3

ไวยากรณ์ (Syntax)

filter: sepia(percentage);

ค่าตัวอย่าง

filter: sepia(0%);      /* ภาพต้นฉบับ (ค่าเริ่มต้น) */
filter: sepia(50%);     /* ครึ่ง sepia */
filter: sepia(100%);    /* Sepia เต็มที่ */
filter: sepia(1);       /* เทียบเท่า 100% (ใช้ตัวเลข 0-1 ได้) */

คือ Sepia คืออะไร?

Sepia เป็นเอฟเฟกต์สีที่ทำให้ภาพมีโทนสีน้ำตาล-แดงอ่อน (sepia tone) เรียกได้ว่า "สีภาพเก่า" หรือ "สีโบราณ" มักใช้ในการถ่ายภาพยุคเก่า (ศตวรรษที่ 19) เพื่อเพิ่มความทนทานของภาพ

การประยุกต์ใช้

  • สร้างลักษณะภาพเก่า/ย้อนยุค (vintage/retro)
  • Hover effect: ภาพสีปกติ → sepia เมื่อ hover
  • Thumbnail สำหรับบทความประวัติศาสตร์
  • รวมกับ grayscale เพื่อเอฟเฟกต์ขาวดำ-เซเปีย
/* ตัวอย่าง hover effect */
img {
  filter: sepia(0%);
  transition: filter 0.3s ease;
}
img:hover {
  filter: sepia(100%);
}