พอดแคสต์ CSS - 023: ตัวกรอง
สมมติว่าคุณต้องสร้างองค์ประกอบที่ค่อนข้างทึบแสง เอฟเฟกต์กระจกน้ำแข็งเกาะเหนือรูปภาพ โดยข้อความจะต้องเป็นข้อความแบบสด ไม่ใช่รูปภาพ คุณจะทำอย่างไร
ชุดค่าผสมของตัวกรอง CSS และ backdrop-filter
ทำให้เราสามารถใส่เอฟเฟกต์และเบลอสิ่งที่จำเป็นได้แบบเรียลไทม์
การเบลอและความทึบแสงเป็น 2 ในฟิลเตอร์ที่ใช้ได้
มาดูคร่าวๆ ว่าวิธีการเหล่านั้นมีอะไรบ้างและวิธีใช้
พร็อพเพอร์ตี้ filter
คุณสามารถใช้ตัวกรองต่อไปนี้อย่างน้อย 1 รายการเป็นค่าสำหรับ
filter
หากคุณใช้ตัวกรองไม่ถูกต้อง
ตัวกรองที่เหลือที่กำหนดไว้สำหรับ filter
จะไม่ทำงาน
blur
วิธีนี้จะใช้การเบลอแบบเกาส์เชียน (Gaussian Blur) และอาร์กิวเมนต์เดียวที่คุณสามารถส่งได้คือ 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 ที่นี่
ฟิลเตอร์ฉากหลัง
ฟิลเตอร์ฉากหลัง
จะยอมรับค่าฟังก์ชันตัวกรองเดียวกันกับ filter
ความแตกต่างระหว่าง backdrop-filter
และ filter
คือพร็อพเพอร์ตี้ backdrop-filter
จะใช้เฉพาะตัวกรองกับพื้นหลัง
ที่พร็อพเพอร์ตี้ filter
จะนำไปใช้กับองค์ประกอบทั้งหมด
ตัวอย่างนี้เป็นตัวอย่างที่ดีในช่วงเริ่มต้นบทเรียน เพราะคุณไม่ต้องการให้ข้อความถูกเบลอ และโดยหลักการแล้ว คุณจะไม่ต้องเพิ่มองค์ประกอบ HTML เข้าไปอีก ซึ่งสามารถใช้ฟิลเตอร์เฉพาะกับฉากหลังได้
ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับตัวกรอง
ข้อใดต่อไปนี้คือฟังก์ชันตัวกรอง CSS
multiply()
invert()
grayscale()
blur()
brightness()
flip()
CSS สามารถใช้ฟิลเตอร์ SVG ได้ไหม