การทำความเข้าใจ CSS3 Filter Functions สำหรับเอฟเฟกต์ภาพ

Filter functions ใช้สร้างเอฟเฟกต์ภาพ เช่น ปรับคอนทราสต์ ความสว่าง หมุนสี ความทึบแสง บนรูปภาพหรือ element

1. Contrast (คอนทราสต์)

ใช้ filter: contrast(%) ค่า 0 = สีดำทั้งภาพ, 100% = ภาพต้นฉบับ (ค่าเริ่มต้น), >100% = คอนทราสต์สูงกว่าเดิม

ตัวอย่าง Contrast

<!DOCTYPE html> <html> <head> <style> img.demo {    filter: brightness(120%);    filter: contrast(120%); } </style> </head> <body> <h1>Learn MySQL</h1> <img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150"> <h1>Learn MySQL</h1> <p>Below image is brighter and has more contrast than the original image above.</p> <img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150"> </body> </html>

2. Drop Shadow (เงา)

ใช้ filter: drop-shadow(h-shadow v-shadow blur spread color)

• h-shadow - เงาแนวนอน (บวก = ขวา, ลบ = ซ้าย)
• v-shadow - เงาแนวตั้ง (บวก = ล่าง, ลบ = บน)
• blur - ความเบลอของเงา
• spread - ขยาย/หดเงา (บวก = ขยาย, ลบ = หด)
• color - สีเงา

ตัวอย่าง Drop Shadow

<!DOCTYPE html> <html> <head> <style> img.demo {    filter: brightness(120%);    filter: contrast(120%);    filter: drop-shadow(10px 10px 10px green); } </style> </head> <body> <h1>Learn MySQL</h1> <img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150"> <h1>Learn MySQL</h1> <img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150"> </body> </html>

3. Sepia Effect (โทนสépia)

ใช้ filter: sepia(%) 0% = ภาพต้นฉบับ, 100% = โทนสépia เต็มที่

ตัวอย่าง Sepia

<!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>

Filter Functions อื่นๆ ที่นิยม:

การรวมหลาย Filter:

เขียนต่อกันได้: filter: contrast(120%) brightness(110%) sepia(50%); ลำดับมีผลต่อผลลัพธ์