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