The CSS Podcast - 023: Filters
สมมติว่าคุณต้องสร้างองค์ประกอบที่มีเอฟเฟกต์กระจกฝ้าทึบแสงเล็กน้อยซึ่งวางอยู่ด้านบนของรูปภาพ ข้อความต้องเป็นข้อความสด ไม่ใช่รูปภาพ คุณจะทำอย่างไร
การใช้ฟิลเตอร์ CSS ร่วมกับ backdrop-filter
ช่วยให้เราใส่เอฟเฟกต์และเบลอสิ่งที่ต้องการได้แบบเรียลไทม์
เบลอและความทึบเป็น 2 ฟิลเตอร์จากที่มีอยู่มากมาย มาดูกันคร่าวๆ ว่าฟิลเตอร์แต่ละแบบทำงานอย่างไรและวิธีใช้
พร็อพเพอร์ตี้ filter
คุณใช้ตัวกรองต่อไปนี้อย่างน้อย 1 รายการเป็นค่าสำหรับ filter
ได้
หากคุณใช้ตัวกรองไม่ถูกต้อง ตัวกรองที่เหลือที่กำหนดไว้สำหรับ filter
จะไม่ทำงาน
blur
ซึ่งจะใช้การเบลอแบบ Gaussian และอาร์กิวเมนต์เดียวที่คุณส่งได้คือ radius
ซึ่งก็คือระดับการเบลอ
ซึ่งต้องเป็นหน่วยความยาว เช่น 10px
ระบบไม่ยอมรับเปอร์เซ็นต์
.my-element {
filter: blur(0.2em);
}
brightness
หากต้องการเพิ่มความสว่างหรือลดความสว่างขององค์ประกอบ ให้ใช้ฟังก์ชันความสว่าง ค่าความสว่างจะแสดงเป็นเปอร์เซ็นต์ โดยรูปภาพที่ไม่มีการแก้ไขจะแสดงเป็นค่า 100% ค่า 0% จะเปลี่ยนรูปภาพเป็นสีดําสนิท ดังนั้นค่าระหว่าง 0% ถึง 100% จะทําให้รูปภาพสว่างน้อยลง ใช้ค่ามากกว่า 100% เพื่อเพิ่มความสว่าง
.my-element {
filter: brightness(80%);
}
contrast
ตั้งค่าระหว่าง 0% ถึง 100% เพื่อลดหรือเพิ่มคอนทราสต์ตามลำดับ
.my-element {
filter: contrast(160%);
}
grayscale
คุณสามารถใช้เอฟเฟกต์สีเทาทั้งหมดได้โดยใช้ 1
เป็นค่าสำหรับ grayscale()
หรือ 0
เพื่อให้องค์ประกอบมีสีอิ่มตัวทั้งหมด
นอกจากนี้ คุณยังใช้เปอร์เซ็นต์หรือค่าทศนิยมเพื่อใช้เอฟเฟกต์สีเทาบางส่วนได้ด้วย
หากไม่ส่งอาร์กิวเมนต์ องค์ประกอบจะเป็นโทนสีเทาโดยสมบูรณ์
หากคุณส่งค่ามากกว่า 100% ระบบจะจำกัดค่าไว้ที่ 100%
.my-element {
filter: grayscale(80%);
}
invert
เช่นเดียวกับ grayscale
คุณส่ง 1
หรือ 0
ไปยังฟังก์ชัน invert()
เพื่อเปิดหรือปิดได้เช่นกัน เมื่อเปิดอยู่ สีขององค์ประกอบจะกลับเป็นค่าสีตรงข้ามโดยสมบูรณ์
นอกจากนี้ คุณยังใช้ค่าเปอร์เซ็นต์หรือทศนิยมเพื่อใช้การกลับสีเพียงบางส่วนได้ด้วย
หากคุณไม่ได้ส่งอาร์กิวเมนต์ใดๆ ไปยังฟังก์ชัน invert()
ระบบจะกลับองค์ประกอบทั้งหมด
.my-element {
filter: invert(1);
}
opacity
ตัวกรอง opacity()
ทํางานเหมือนกับพร็อพเพอร์ตี้ opacity
ซึ่งคุณสามารถส่งตัวเลขหรือเปอร์เซ็นต์เพื่อเพิ่มหรือลดระดับความทึบได้
หากไม่ส่งอาร์กิวเมนต์ องค์ประกอบจะแสดงอย่างเต็มรูปแบบ
.my-element {
filter: opacity(0.3);
}
saturate
ตัวกรองความอิ่มตัวคล้ายกับตัวกรอง brightness
มากและยอมรับอาร์กิวเมนต์เดียวกัน ซึ่งก็คือตัวเลขหรือเปอร์เซ็นต์
saturate
จะเพิ่มหรือลดความอิ่มตัวของสีแทนที่จะเพิ่มหรือลดความสว่าง
.my-element {
filter: saturate(155%);
}
sepia
คุณเพิ่มเอฟเฟกต์โทนสีซีเปียได้ด้วยตัวกรองนี้ซึ่งทำงานเหมือนกับ grayscale()
โทนสีซีเปียเป็นเทคนิคการพิมพ์รูปภาพที่เปลี่ยนโทนสีดำเป็นโทนสีน้ำตาลเพื่อเพิ่มความอบอุ่น
คุณสามารถส่งตัวเลขหรือเปอร์เซ็นต์เป็นอาร์กิวเมนต์สำหรับ sepia()
ซึ่งจะเพิ่มหรือลดเอฟเฟกต์
การไม่ส่งอาร์กิวเมนต์จะเพิ่มเอฟเฟกต์ซีเปียแบบเต็ม (เทียบเท่ากับ sepia(100%)
)
.my-element {
filter: sepia(70%);
}
hue-rotate
คุณได้เรียนรู้เกี่ยวกับวิธีที่สีใน hsl
อ้างอิงการหมุนของวงล้อสีในบทเรียนเกี่ยวกับสี และฟิลเตอร์นี้ทำงานในลักษณะที่คล้ายกัน
หากคุณส่งผ่านมุม เช่น องศาหรือการหมุน ระบบจะเปลี่ยนสีขององค์ประกอบทั้งหมด โดยเปลี่ยนส่วนของวงล้อสีที่ใช้อ้างอิง หากไม่ส่งอาร์กิวเมนต์ ระบบจะไม่ดำเนินการใดๆ
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
คุณใช้เงาที่แนบไปกับเส้นโค้งได้เช่นเดียวกับในเครื่องมือออกแบบ เช่น Photoshop ด้วย drop-shadow
ระบบจะใช้เงานี้กับมาสก์อัลฟ่า ซึ่งมีประโยชน์มากในการเพิ่มเงาให้กับรูปภาพที่ตัดออก
ตัวกรอง drop-shadow
จะใช้พารามิเตอร์เงาซึ่งมีค่าออฟเซ็ต-x, ออฟเซ็ต-y, เบลอ และสีที่คั่นด้วยเว้นวรรค
ซึ่งเกือบจะเหมือนกับ box-shadow
แต่ระบบไม่รองรับคีย์เวิร์ด inset
และค่าการแพร่กระจาย
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
ดูข้อมูลเพิ่มเติมเกี่ยวกับเงาประเภทต่างๆ ในโมดูลเงา
url
ฟิลเตอร์ url
ช่วยให้คุณใช้ฟิลเตอร์ SVG จากองค์ประกอบหรือไฟล์ SVG ที่ลิงก์ได้
คุณอ่านข้อมูลเพิ่มเติมเกี่ยวกับฟิลเตอร์ SVG ได้ที่นี่
ฟิลเตอร์ฉากหลัง
พร็อพเพอร์ตี้ backdrop-filter
ยอมรับค่าฟังก์ชันตัวกรองทั้งหมดเหมือนกับ filter
ความแตกต่างระหว่าง backdrop-filter
กับ filter
คือพร็อพเพอร์ตี้ backdrop-filter
จะใช้ตัวกรองกับพื้นหลังเท่านั้น ส่วนพร็อพเพอร์ตี้ filter
จะใช้กับองค์ประกอบทั้งหมด
ตัวอย่างที่แสดงในช่วงต้นของบทนี้เป็นตัวอย่างที่สมบูรณ์แบบเนื่องจากคุณไม่ต้องการให้ข้อความเบลอ และไม่ควรต้องเพิ่มองค์ประกอบ HTML เพิ่มเติม ความสามารถในการใช้ฟิลเตอร์กับฉากหลังเท่านั้นทำให้การดำเนินการดังกล่าวเป็นไปได้
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับตัวกรอง
ฟังก์ชันตัวกรอง CSS รายการใดต่อไปนี้
invert()
multiply()
blur()
brightness()
flip()
grayscale()
CSS ใช้ฟิลเตอร์ SVG ได้ไหม