ฟิลเตอร์

สมมติว่าคุณต้องสร้างองค์ประกอบที่ค่อนข้างทึบแสง เอฟเฟกต์กระจกน้ำแข็งเกาะเหนือรูปภาพ โดยข้อความจะต้องเป็นข้อความแบบสด ไม่ใช่รูปภาพ คุณจะทำอย่างไร

ชุดค่าผสมของตัวกรอง CSS และ backdrop-filter ทำให้เราสามารถใส่เอฟเฟกต์และเบลอสิ่งที่จำเป็นได้แบบเรียลไทม์ การเบลอและความทึบแสงเป็น 2 ในฟิลเตอร์ที่ใช้ได้ มาดูคร่าวๆ ว่าวิธีการเหล่านั้นมีอะไรบ้างและวิธีใช้

พร็อพเพอร์ตี้ filter

การรองรับเบราว์เซอร์

  • Chrome: 53
  • ขอบ: 12.
  • Firefox: 35.
  • Safari: 9.1

แหล่งที่มา

คุณสามารถใช้ตัวกรองต่อไปนี้อย่างน้อย 1 รายการเป็นค่าสำหรับ filter หากคุณใช้ตัวกรองไม่ถูกต้อง ตัวกรองที่เหลือที่กำหนดไว้สำหรับ filter จะไม่ทำงาน

blur

วิธีนี้จะใช้การเบลอแบบเกาส์เชียน (Gaussian Blur) และอาร์กิวเมนต์เดียวที่คุณสามารถส่งได้คือ radius ซึ่งก็คือ ปริมาณการเบลอ ค่านี้ต้องเป็นหน่วยความยาว เช่น 10px ระบบไม่ยอมรับเปอร์เซ็นต์

.my-element {
    filter: blur(0.2em);
}

brightness

การรองรับเบราว์เซอร์

  • Chrome: 18.
  • ขอบ: 12.
  • Firefox: 35.
  • Safari: 6.

แหล่งที่มา

วิธีเพิ่มหรือลดความสว่างขององค์ประกอบ ใช้ฟังก์ชันความสว่าง ค่าความสว่างแสดงเป็นเปอร์เซ็นต์ โดยรูปภาพที่ไม่เปลี่ยนแปลงแสดงเป็นค่า 100% ค่า 0% จะเปลี่ยนรูปภาพเป็นสีดำสนิท ดังนั้นค่าระหว่าง 0% ถึง 100% จะทำให้รูปภาพสว่างน้อยลง ใช้ค่าที่เกิน 100% เพื่อเพิ่มความสว่าง

.my-element {
    filter: brightness(80%);
}

contrast

การรองรับเบราว์เซอร์

  • Chrome: 18.
  • ขอบ: 12.
  • Firefox: 35.
  • Safari: 6.

แหล่งที่มา

ตั้งค่าระหว่าง 0% ถึง 100% เพื่อลดหรือเพิ่มคอนทราสต์ตามลำดับ

.my-element {
    filter: contrast(160%);
}

grayscale

การรองรับเบราว์เซอร์

  • Chrome: 18.
  • ขอบ: 12.
  • Firefox: 35.
  • Safari: 6.

แหล่งที่มา

คุณใช้เอฟเฟกต์โทนสีเทาโดยสมบูรณ์ได้โดยใช้ 1 เป็นค่าสำหรับ grayscale() หรือ 0 ให้มีองค์ประกอบที่อิ่มตัวอย่างสมบูรณ์ คุณยังใช้ค่าเปอร์เซ็นต์หรือทศนิยมเพื่อใช้เอฟเฟกต์โทนสีเทาบางส่วนได้ด้วย หากไม่ส่งอาร์กิวเมนต์ องค์ประกอบจะเป็นโทนสีเทาโดยสมบูรณ์ หากคุณส่งค่ามากกว่า 100% ระบบจะจำกัดค่าสูงสุดที่ 100%

.my-element {
    filter: grayscale(80%);
}

invert

การรองรับเบราว์เซอร์

  • Chrome: 18.
  • ขอบ: 12.
  • Firefox: 35.
  • Safari: 6.

แหล่งที่มา

เช่นเดียวกับ grayscale คุณสามารถส่ง 1 หรือ 0 ไปยังฟังก์ชัน invert() เพื่อเปิดหรือปิดตัวเลือกนี้ เมื่อเปิดอยู่ สีขององค์ประกอบจะกลับด้านกันทั้งหมด คุณยังใช้ค่าเปอร์เซ็นต์หรือทศนิยมเพื่อใส่เฉพาะการกลับสีเพียงบางส่วนได้ด้วย หากคุณไม่ส่งผ่านอาร์กิวเมนต์ใดๆ ไปยังฟังก์ชัน invert() องค์ประกอบดังกล่าวจะกลับด้านกันทั้งหมด

.my-element {
    filter: invert(1);
}

opacity

การรองรับเบราว์เซอร์

  • Chrome: 18.
  • ขอบ: 12.
  • Firefox: 35.
  • Safari: 6.

แหล่งที่มา

ตัวกรอง opacity() ทำงานเช่นเดียวกับพร็อพเพอร์ตี้ opacity ซึ่งคุณสามารถส่งผ่านตัวเลขหรือเปอร์เซ็นต์เพื่อเพิ่มหรือลดความทึบแสงได้ หากไม่ส่งอาร์กิวเมนต์ องค์ประกอบจะแสดงให้เห็นอย่างสมบูรณ์

.my-element {
    filter: opacity(0.3);
}

saturate

การรองรับเบราว์เซอร์

  • Chrome: 18.
  • ขอบ: 12.
  • Firefox: 35.
  • Safari: 6.

แหล่งที่มา

ตัวกรองสีอิ่มตัวคล้ายกับตัวกรอง brightness มาก และยอมรับอาร์กิวเมนต์เดียวกัน นั่นคือ ตัวเลขหรือเปอร์เซ็นต์ แทนที่จะเพิ่มหรือลดเอฟเฟ็กต์ความสว่าง saturate เพิ่มหรือลดความอิ่มตัวของสี

.my-element {
    filter: saturate(155%);
}

sepia

การรองรับเบราว์เซอร์

  • Chrome: 18.
  • ขอบ: 12.
  • Firefox: 35.
  • Safari: 6.

แหล่งที่มา

คุณเพิ่มเอฟเฟกต์โทนซีเปียได้ด้วยฟิลเตอร์นี้ซึ่งทํางานเหมือนกับ grayscale() โทนสีซีเปียเป็นเทคนิคการพิมพ์ภาพถ่ายที่จะแปลงโทนสีดำเป็นโทนสีน้ำตาลเพื่อเพิ่มความอบอุ่น คุณสามารถส่งผ่านตัวเลขหรือเปอร์เซ็นต์เป็นอาร์กิวเมนต์สำหรับ sepia() ได้ ซึ่งจะเพิ่มหรือลดผลกระทบ การไม่ส่งอาร์กิวเมนต์จะเป็นการเพิ่มเอฟเฟกต์ซีเปียแบบเต็ม (เทียบเท่ากับ sepia(100%))

.my-element {
    filter: sepia(70%);
}

hue-rotate

การรองรับเบราว์เซอร์

  • Chrome: 18.
  • ขอบ: 12.
  • Firefox: 35.
  • Safari: 6.

แหล่งที่มา

คุณได้เรียนรู้เกี่ยวกับวิธีที่โทนสีใน hsl อ้างอิงการหมุนวงล้อสีใน บทเรียนสี และตัวกรองนี้ทำงานในลักษณะที่คล้ายกัน หากคุณผ่านมุม เช่น องศาหรือเลี้ยว โมเดลจะเปลี่ยนสีของทุกสีขององค์ประกอบ การเปลี่ยนส่วนของวงล้อสีที่ใช้อ้างอิง หากข้ามการโต้แย้งไม่ได้ จะไม่มีผลใดๆ

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

การรองรับเบราว์เซอร์

  • Chrome: 18.
  • ขอบ: 12.
  • Firefox: 35.
  • Safari: 6.

แหล่งที่มา

คุณสามารถใช้เงาตกกระทบที่โค้งมน เหมือนที่ทำในเครื่องมือออกแบบ เช่น Photoshop กับ drop-shadow เงานี้จะใช้กับมาสก์อัลฟ่าซึ่งมีประโยชน์มากสำหรับการเพิ่มเงาในภาพที่ถูกตัดออก ฟิลเตอร์ drop-shadow จะใช้พารามิเตอร์เงาซึ่งมีค่าออฟเซ็ต x, ออฟเซ็ต-y, เบลอ และสีซึ่งคั่นด้วยช่องว่าง ข้อมูลแทบจะเหมือนกับ box-shadow แต่ไม่รองรับคีย์เวิร์ด inset และค่ากระจาย

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับเงาประเภทต่างๆ ในโมดูลเงา

url

การรองรับเบราว์เซอร์

  • Chrome: 5.
  • ขอบ: 12.
  • Firefox: 3.
  • Safari: 6.

แหล่งที่มา

ฟิลเตอร์ url ช่วยให้คุณใช้ฟิลเตอร์ SVG จากองค์ประกอบหรือไฟล์ SVG ที่ลิงก์อยู่ได้ คุณสามารถ อ่านเพิ่มเติมเกี่ยวกับฟิลเตอร์ SVG ที่นี่

ฟิลเตอร์ฉากหลัง

การรองรับเบราว์เซอร์

  • Chrome: 76
  • ขอบ: 79
  • Firefox: 103
  • Safari: 18.

แหล่งที่มา

ฟิลเตอร์ฉากหลัง จะยอมรับค่าฟังก์ชันตัวกรองเดียวกันกับ filter ความแตกต่างระหว่าง backdrop-filter และ filter คือพร็อพเพอร์ตี้ backdrop-filter จะใช้เฉพาะตัวกรองกับพื้นหลัง ที่พร็อพเพอร์ตี้ filter จะนำไปใช้กับองค์ประกอบทั้งหมด

ตัวอย่างนี้เป็นตัวอย่างที่ดีในช่วงเริ่มต้นบทเรียน เพราะคุณไม่ต้องการให้ข้อความถูกเบลอ และโดยหลักการแล้ว คุณจะไม่ต้องเพิ่มองค์ประกอบ HTML เข้าไปอีก ซึ่งสามารถใช้ฟิลเตอร์เฉพาะกับฉากหลังได้

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับตัวกรอง

ข้อใดต่อไปนี้คือฟังก์ชันตัวกรอง CSS

brightness()
flip()
blur()
grayscale()
multiply()
invert()

CSS สามารถใช้ฟิลเตอร์ SVG ได้ไหม

ไม่ได้
ใช่