เกริ่นนำ
ฟิลเตอร์เป็นเครื่องมือที่มีประสิทธิภาพที่ผู้เขียนเว็บสามารถใช้เพื่อให้ได้เอฟเฟกต์ภาพที่น่าสนใจ ในบทความนี้ เราจะพูดถึงประวัติของเอฟเฟกต์ตัวกรอง รวมถึงหน้าที่และวิธีใช้ เราจะกล่าวถึงตัวอย่างตัวกรองที่กำหนดไว้ล่วงหน้าทั้งหมดที่กำหนดไว้สำหรับ CSS นอกจากนี้เราจะพูดถึงข้อควรพิจารณาเกี่ยวกับประสิทธิภาพสำหรับการใช้ตัวกรองบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ เนื่องจากการทราบถึงผลกระทบต่อความเร็วจากตัวกรองเป็นสิ่งสำคัญต่อประสบการณ์ของผู้ใช้ที่ดี สุดท้าย เราจะมาดูสถานะปัจจุบันของการใช้งานในเบราว์เซอร์ที่ทันสมัยกัน
เอฟเฟกต์ตัวกรองในอดีต ปัจจุบัน และอนาคต
เอฟเฟกต์ฟิลเตอร์ที่เกิดขึ้นเป็นส่วนหนึ่งของข้อกำหนดกราฟิกเวกเตอร์ที่รองรับการปรับขนาด (Scalable Vector Graphics หรือ SVG) โมเดลเหล่านี้สร้างขึ้นเพื่อใช้เอฟเฟกต์รูปภาพที่มีพิกเซลต่างๆ จำนวนหนึ่งในการวาดภาพเวกเตอร์ เมื่อเวลาผ่านไป เมื่อผู้ให้บริการเบราว์เซอร์เพิ่มความสามารถของ SVG ลงในเบราว์เซอร์ ประโยชน์ของฟิลเตอร์ก็เห็นได้ชัดเจน Robert O’Callahan จาก Mozilla มีแนวคิดที่ยอดเยี่ยมในการใช้ฟิลเตอร์ SVG ผ่านการใช้ CSS กับเนื้อหา HTML "ปกติ" โรเบิร์ตสร้างต้นแบบเวอร์ชันก่อนเปิดตัวที่แสดงให้เห็นว่าการผสมผสานตัวกรองและการจัดรูปแบบ CSS มีประสิทธิภาพเพียงใด กลุ่มทำงานของ CSS และ SVG ใน W3C ตัดสินใจที่จะทำให้การใช้ฟิลเตอร์ทั้ง HTML และ SVG ผ่านการจัดรูปแบบ CSS มีความสอดคล้องกัน จึงทำให้คุณสมบัติ "ตัวกรอง" สำหรับ CSS เกิดขึ้น ขณะนี้ทีมทำงานร่วมของผู้คนที่ทำงานบน CSS และ SVG กำลังทำงานอย่างหนักเพื่อทำให้ฟิลเตอร์มีประโยชน์ในวงกว้าง คุณสามารถดูข้อกำหนดปัจจุบันสำหรับข้อมูลทั้งหมดนี้ได้ที่นี่
ชีวิตใหม่ของพร็อพเพอร์ตี้ CSS "ตัวกรอง"
บางครั้ง Deja Vu ก็โจมตีนักพัฒนาเว็บเมื่อเห็น "ตัวกรอง" ในสไตล์ CSS กรณีนี้เกิดจากการที่ Internet Explorer เวอร์ชันเก่ามีพร็อพเพอร์ตี้ "ตัวกรอง" ที่เปิดเผยผ่าน CSS เพื่อดำเนินการฟังก์ชันการทำงานเฉพาะแพลตฟอร์ม เราได้เลิกใช้งานพร็อพเพอร์ตี้ "ตัวกรอง" มาตรฐานซึ่งตอนนี้เป็นส่วนหนึ่งของ CSS3 แล้ว ดังนั้น เมื่อคุณเห็น "กรอง" อย่างเป็นธรรมชาติในหน้าเว็บเก่าๆ บางหน้า คุณจะไม่จำเป็นต้องสับสน คุณสมบัติ "ตัวกรอง" ใหม่เป็นที่ที่มีการใช้งานทั้งหมด และ IE เวอร์ชันใหม่มีการใช้งานเช่นเดียวกับเบราว์เซอร์ที่ทันสมัยทั้งหมด
วิธีการทำงานของตัวกรอง
แล้วตัวกรองทำหน้าที่อะไร วิธีที่ง่ายที่สุดในการมองตัวกรองคือเป็นขั้นตอนการประมวลผลหลังใช้เวทมนตร์หลังจากจัดวางและวาดเนื้อหาในหน้าเว็บเสร็จแล้ว
เมื่อเบราว์เซอร์โหลดหน้าเว็บ เบราว์เซอร์ต้องใช้รูปแบบ แสดงการจัดวางและแสดงผลหน้าเว็บ เพื่อให้มีบางอย่างให้ดู ตัวกรองจะทำงานหลังจากขั้นตอนทั้งหมดและก่อนที่จะคัดลอกหน้าเว็บไปยังหน้าจอ สิ่งที่พวกเขาทำคือสแนปชอตหน้าที่แสดงผลเป็นภาพบิตแมป จากนั้นใช้กราฟิกพิเศษกับพิกเซลในภาพรวม แล้ววาดผลลัพธ์ทับบนรูปภาพของหน้าต้นฉบับ วิธีหนึ่งที่มองภาพเหล่านี้ก็เหมือนฟิลเตอร์ที่อยู่หน้าเลนส์กล้อง สิ่งที่คุณเห็นผ่านเลนส์คือโลกภายนอกที่ได้รับการแก้ไขโดยผลกระทบของฟิลเตอร์
ซึ่งหมายความว่าการวาดหน้าเว็บที่มีตัวกรองจะใช้เวลานาน แต่การใช้อย่างเหมาะสมจะส่งผลต่อความเร็วของเว็บไซต์น้อยที่สุด
นอกจากนี้ การใช้ฟิลเตอร์ต่อกันทีละหลายรายการบนเลนส์กล้องก็คือกองซ้อนฟิลเตอร์ต่างๆ เข้าด้วยกันเพื่อให้ใส่เอฟเฟกต์ได้สารพัด
ตัวกรองที่กำหนดโดยใช้ SVG และ CSS
เนื่องจากฟิลเตอร์แต่เดิมมาจาก SVG จึงมีวิธีกำหนดและใช้ฟิลเตอร์นั้นแตกต่างกัน SVG มีองค์ประกอบ <filter> ที่สรุปคำจำกัดความของเอฟเฟกต์ฟิลเตอร์ต่างๆ โดยใช้ไวยากรณ์ XML ชุดของตัวกรองที่กำหนดโดย CSS จะใช้ประโยชน์จากโมเดลกราฟิกเดียวกัน แต่เป็นคำจำกัดความที่ง่ายกว่ามากและใช้งานง่ายในสไตล์ชีต
ฟิลเตอร์ CSS ส่วนใหญ่แสดงได้ในรูปของฟิลเตอร์ SVG และ CSS ยังช่วยให้คุณอ้างอิงฟิลเตอร์ที่ระบุไว้ใน SVG ได้ด้วยหากต้องการ ผู้ออกแบบตัวกรอง CSS ได้รับความลำบากอย่างมากในการทำให้ผู้เขียนเว็บใช้งานตัวกรองได้ง่ายขึ้น บทความนี้จึงมีเพียงตัวกรองที่มีให้จาก CSS โดยตรงเท่านั้น โดยไม่คำนึงถึงคำจำกัดความของ SVG
วิธีใช้ตัวกรอง CSS
การใช้ตัวกรองจาก CSS โดยใช้คุณสมบัติ "ตัวกรอง" ที่ใช้กับองค์ประกอบที่มองเห็นได้ในหน้าเว็บ ตัวอย่างง่ายๆ ก็ลองเขียนประมาณว่า
div { { % mixin filter: grayscale(100%); % } }
ซึ่งจะทำให้เนื้อหาภายในองค์ประกอบ <div> ทั้งหมดในหน้าเว็บเปลี่ยนเป็นสีเทา เหมาะสำหรับการทำให้หน้าเว็บของคุณดูเหมือนรูปภาพทีวีตั้งแต่ช่วงทศวรรษ 1940
ตัวกรองส่วนใหญ่จะใช้พารามิเตอร์บางรูปแบบเพื่อควบคุมปริมาณการกรอง ตัวอย่างเช่น หากต้องการจัดรูปแบบเนื้อหาให้อยู่ระหว่างสีเดิมและโทนสีเทาครึ่งหนึ่ง ให้ทำดังต่อไปนี้
div { { % mixin filter: grayscale(50%); % } }
หากต้องการใช้ตัวกรองต่างๆ อย่างต่อเนื่อง คุณสามารถทำได้ง่ายๆ เพียงจัดเรียงตัวกรองต่างๆ ตามลำดับใน CSS ดังนี้
div { { % mixin filter: grayscale(100%) sepia(100%); % } }
ตัวอย่างนี้จะทําให้เป็นโทนสีเทาทั้งหมดก่อน จากนั้นจึงใช้เอฟเฟกต์ซีเปีย ซึ่งในตอนท้ายจะมีหน้าตาดังนี้
การใช้ฟิลเตอร์ทีละอย่างทำให้มีความยืดหยุ่น ทำให้คุณได้เอฟเฟ็กต์ทุกรูปแบบ การทดลองสร้างผลลัพธ์อันน่าทึ่งขึ้นอยู่กับจินตนาการของคุณ
เอฟเฟกต์ของตัวกรองใดบ้างที่ใช้งานได้เมื่อใช้ CSS
ดังนั้นกลไกฟิลเตอร์ SVG แบบดั้งเดิมจึงมีประสิทธิภาพทั้งคู่ แต่ขณะเดียวกันก็อาจใช้งานยาก ด้วยเหตุนี้ CSS จึงนำเสนอเอฟเฟกต์ฟิลเตอร์แบบมาตรฐานจำนวนมากที่ทําให้ใช้งานได้ง่าย
มาดูแนวทางแต่ละประเภทกันและดูว่ามีอะไรบ้าง
- โทนสีเทา(จำนวนเงิน)
- วิธีนี้จะแปลงสีในรูปภาพที่ป้อนให้เป็นเฉดสีเทา การใช้ "จำนวนเงิน" จะควบคุมจำนวนการแปลงสีเทา หากเป็น 100% ทุกอย่างจะเป็นสีเทา หากเป็น 0% สีจะไม่เปลี่ยนแปลง คุณสามารถใช้จำนวนลอยตัวตรงนี้ได้หากต้องการให้มากกว่าเปอร์เซ็นต์ เช่น 0 จะเหมือนกับ 0% ขณะที่ 1.0 จะเหมือนกับ 100%
- ซีเปีย(จำนวนเงิน)
- ทำให้สีที่ส่งต่อในโทนสีซีเปียเหมือนในภาพถ่ายเก่าๆ การใช้ "จำนวนเงิน" จะทำงานในลักษณะเดียวกันกับฟิลเตอร์ "โทนสีเทา" นั่นคือ 100% จะทำให้ทุกสีโทนสีซีเปียอย่างสมบูรณ์แบบ ส่วนค่าที่เล็กลงทำให้สามารถใช้เอฟเฟ็กต์ในสัดส่วนที่เล็กลง
- อิ่มตัว(จำนวนเงิน)
- วิธีนี้จะนำเอฟเฟกต์ความอิ่มตัวของสีไปใช้กับสีที่ทำให้ดูสดใสขึ้น เป็นเอฟเฟกต์เจ๋งๆ ที่สามารถทำให้รูปภาพดูเหมือนโปสเตอร์หรือการ์ตูน เอฟเฟกต์นี้ยังให้คุณใช้ค่าที่มากกว่า 100% เพื่อเน้นความอิ่มตัวจริงๆ ได้อีกด้วย เอฟเฟกต์ที่ทำให้สิ่งต่างๆ ดูสะดุดตาได้อย่างแน่นอน!
- หมุนตามสี(มุม)
- ฟีเจอร์นี้เป็นเอฟเฟกต์สีพิเศษที่อาจนำมาใช้เพื่อให้ได้ผลลัพธ์ที่น่าสนใจได้ วิธีนี้ช่วยเปลี่ยนสีรอบๆ เพื่อทำให้รูปอินพุตดูแตกต่างอย่างสิ้นเชิง หากคุณนึกภาพสีสเปกตรัมจากสีแดงไปจนถึงม่วงรอบวงล้อสี เอฟเฟกต์นี้จะนำสีเดิมที่อยู่ในวงล้อมาเป็นอินพุตแล้วหมุนตามพารามิเตอร์ "angle" เพื่อสร้างสีในวงล้อที่หมุนเป็นค่าสีเอาต์พุต ดังนั้น ทุกสีในภาพจะเปลี่ยนตาม "มุม" เดียวกันบนล้อ แน่นอนว่านี่เป็นการทำให้ข้อมูลง่ายๆ ของเรา แต่ก็หวังว่าจะใกล้เคียงมากพอสมควร
- สลับ(จำนวนเงิน)
- เอฟเฟกต์นี้จะเปลี่ยนสี ดังนั้นหาก "จำนวนเงิน" ที่ใช้เป็น 100% ผลลัพธ์ที่ได้จะดูเหมือนรูปภาพที่ถ่ายย้อนวันวานจากวันถ่ายภาพเก่าๆ ด้วยกล้อง และเช่นเคย การใช้ค่าที่น้อยกว่า 100% จะค่อยๆ เพิ่มเอฟเฟกต์กลับสี
- ความทึบแสง(จำนวนเงิน)
- หากต้องการให้เนื้อหาที่กรองเป็นแบบเปิดเผยบางส่วน คุณก็ควรเลือกวิธีนี้ ค่า "amount" จะกำหนดว่าเอาต์พุตจะทึบแสงเพียงใด ดังนั้นค่า 100% จะเป็นค่าทึบแสงเต็มที่ ดังนั้นเอาต์พุตจะเหมือนกับอินพุตทุกประการ เนื่องจากค่าดังกล่าวลดลงจนต่ำกว่า 100% รูปภาพที่ได้จะทึบแสงน้อยลง (โปร่งใสมากขึ้น) และคุณจะเห็นค่าดังกล่าวน้อยลง ซึ่งหมายความว่า หากทับซ้อนกับสิ่งอื่นในหน้าเว็บ สิ่งที่อยู่ข้างใต้จะเริ่มปรากฏให้เห็น "จำนวน" ที่เท่ากับ 0% หมายความว่าจำนวนดังกล่าวจะหายไปทั้งหมด แต่โปรดทราบว่าคุณจะยังได้รับเหตุการณ์ เช่น การคลิกเมาส์ ฯลฯ เกิดขึ้นกับวัตถุที่โปร่งใสโดยสมบูรณ์ วิธีนี้จึงมีประโยชน์หากคุณต้องการสร้างพื้นที่ที่คลิกได้โดยไม่ต้องแสดงอะไรเลย
ซึ่งทำงานในลักษณะเดียวกับคุณสมบัติ "ความทึบแสง" ที่คุณรู้จักอยู่แล้ว โดยทั่วไป คุณสมบัติ "ความทึบแสง" ของ CSS ไม่ใช่การเร่งฮาร์ดแวร์ แต่บางเบราว์เซอร์ที่ใช้ตัวกรองโดยใช้การเร่งฮาร์ดแวร์จะเร่งความทึบแสงเวอร์ชันตัวกรองเพื่อประสิทธิภาพที่ดีขึ้นมาก
- ความสว่าง(จำนวนเงิน)
- วิธีนี้เหมือนกับการควบคุมความสว่างในทีวี ปรับสีระหว่างสีดำสนิทและสีเดิมตามสัดส่วนของพารามิเตอร์ "amount" ถ้าตั้งค่านี้เป็น 0% คุณจะไม่เห็นอะไรนอกจากสีดำ แต่เนื่องจากค่าจะเพิ่มขึ้นจนถึง 100% คุณจะเห็นรูปภาพต้นฉบับสว่างขึ้นเรื่อยๆ จนกว่าจะถึง 100% ในตำแหน่งเดียวกับรูปภาพอินพุต แน่นอนว่าคุณสามารถดำเนินการต่อได้ ดังนั้นการตั้งค่าบางอย่าง เช่น 200% จะทำให้รูปภาพสว่างเป็นสองเท่าของต้นฉบับ เหมาะสำหรับการปรับภาพถ่ายในสภาวะแสงน้อย
- คอนทราสต์(จำนวนเงิน)
- การควบคุมเพิ่มเติมจากทีวีของคุณ ซึ่งจะปรับความแตกต่างระหว่างส่วนที่มืดที่สุดและสว่างที่สุดของรูปภาพอินพุต แต่ถ้าใช้ 0% คุณก็จะได้สีดำเหมือน "ความสว่าง" ด้วย ไม่น่าสนใจจนเกินไป แต่เมื่อเพิ่มค่าเป็น 100% ความแตกต่างในความมืดจะเปลี่ยนแปลงไปจนกว่าจะถึง 100% และเป็นภาพต้นฉบับอีกครั้ง คุณยังสามารถแสดงผลให้มากกว่า 100% ได้ด้วย ซึ่งจะเพิ่มความแตกต่างระหว่างสีอ่อนและมืดมากยิ่งขึ้น
- เบลอ(รัศมี)
- หากต้องการให้เนื้อหามีขอบนุ่มนวล ก็เพิ่มการเบลอได้ ภาพนี้ดูเหมือนวาสลีนสุดคลาสสิกบนแผ่นแก้วที่เคยใช้เป็นเทคนิคการสร้างภาพยนตร์ยอดนิยม เกลี่ยสีทุกสีเข้าด้วยกันและกระจายเอฟเฟ็กต์ออกไป คล้ายกับเวลาที่คุณหลุดโฟกัส พารามิเตอร์ "Radius" ส่งผลต่อจำนวนพิกเซลบนหน้าจอที่กลมกลืนกัน ดังนั้นค่าที่มากกว่าจะทำให้เบลอมากขึ้น และไม่มีการเปลี่ยนแปลงใดๆ ในรูปภาพนี้
- drop-shadow(shadow)
- เราดีใจมากที่สามารถสร้างเนื้อหาให้ดูเหมือนอยู่กลางแสงแดดโดยมีเงาอยู่บนพื้น และแน่นอนว่ามี "เงาตกกระทบ" อยู่ด้านหลัง จะเป็นการถ่ายสแนปชอตของภาพ ทำให้เป็นสีเดียว แล้วเบลอภาพ แล้วชดเชยผลลัพธ์เล็กน้อยเพื่อให้ดูเหมือนเงาของเนื้อหาต้นฉบับ พารามิเตอร์ "shadow" ที่ส่งเข้ามาจะซับซ้อนกว่าการใช้เพียงค่าเดียวเล็กน้อย ซึ่งเป็นชุดค่าที่คั่นด้วยการเว้นวรรค และบางค่าก็ไม่บังคับเช่นกัน ค่า "เงา" จะควบคุมตำแหน่งการวางเงา จำนวนการเบลอที่ใช้ สีของเงา ฯลฯ สำหรับรายละเอียดทั้งหมดของค่า "เงา" ให้ข้อกำหนดของพื้นหลัง CSS3 ระบุ "เงากล่อง" ไว้อย่างละเอียด ตัวอย่างด้านล่างนี้จะทำให้คุณพอเห็นภาพของความเป็นไปได้ต่างๆ
ซึ่งเป็นการดำเนินการตัวกรองอีกอย่างหนึ่งที่คล้ายกับฟังก์ชัน CSS ที่มีอยู่ผ่านคุณสมบัติ "box-shadow" การใช้วิธีการกรองหมายความว่าเบราว์เซอร์บางตัวอาจเร่งฮาร์ดแวร์ตามที่เราอธิบายเกี่ยวกับการดำเนินการ "ความทึบแสง" ด้านบน
- URL ที่อ้างอิงฟิลเตอร์ SVG
- เนื่องจากฟิลเตอร์เกิดขึ้นเป็นส่วนหนึ่งของ SVG คุณจึงควรที่จะจัดรูปแบบเนื้อหาได้โดยใช้ฟิลเตอร์ SVG ทำได้ง่ายๆ ด้วยข้อเสนอพร็อพเพอร์ตี้ "ตัวกรอง" ปัจจุบัน ฟิลเตอร์ทั้งหมดใน SVG จะกําหนดด้วยแอตทริบิวต์ "id" ที่ใช้เพื่ออ้างอิงเอฟเฟกต์ของฟิลเตอร์ได้ ดังนั้น หากต้องการใช้ฟิลเตอร์ SVG จาก CSS สิ่งที่คุณต้องทำคืออ้างอิงโดยใช้ตัวกรองโดยใช้ไวยากรณ์ "url"
เช่น มาร์กอัป SVG สำหรับฟิลเตอร์อาจมีลักษณะดังนี้
<filter id="foo">...</filter>
จาก CSS คุณสามารถทำสิ่งง่ายๆ เช่น
div { { % mixin filter: url(#foo); % } }
เท่านี้ก็เรียบร้อย <div> ทั้งหมดในเอกสารจะได้รับการจัดรูปแบบด้วยการกำหนดฟิลเตอร์ SVG
- กำหนดเอง (เร็วๆ นี้)
- พบกับฟิลเตอร์ที่กำหนดเองเร็วๆ นี้ เครื่องมือเหล่านี้ใช้ประโยชน์จากความสามารถของ GPU สำหรับกราฟิกเพื่อใช้การลงสีพิเศษเพื่อสร้างเอฟเฟกต์อันน่าทึ่งตามจินตนาการของคุณเองเท่านั้น ข้อกำหนดของ "ตัวกรอง" ส่วนนี้ยังอยู่ระหว่างการหารือกันและก็ไหลลื่น แต่ทันทีที่ระบบนี้เริ่มมีให้บริการบนเบราว์เซอร์ใกล้คุณ เราจะพยายามเขียนเพิ่มเติมถึงสิ่งที่เป็นไปได้
ข้อพิจารณาด้านประสิทธิภาพ
สิ่งหนึ่งที่นักพัฒนาเว็บทุกคนให้ความสำคัญคือประสิทธิภาพของหน้าเว็บหรือแอปพลิเคชันของตน ตัวกรอง CSS เป็นเครื่องมือที่มีประสิทธิภาพสำหรับเอฟเฟกต์ภาพ แต่ขณะเดียวกันก็อาจส่งผลต่อประสิทธิภาพของเว็บไซต์ด้วย
การทำความเข้าใจถึงการกระทำและผลกระทบที่มีต่อประสิทธิภาพถือเป็นเรื่องสำคัญ โดยเฉพาะอย่างยิ่งหากคุณต้องการให้เว็บไซต์ทำงานได้ดีบนอุปกรณ์เคลื่อนที่หากรองรับตัวกรอง CSS
ข้อแรก ตัวกรองไม่ได้สร้างเท่ากันทั้งหมด จริงๆ แล้ว ตัวกรองส่วนใหญ่จะทำงานได้อย่างรวดเร็วในทุกแพลตฟอร์ม และส่งผลต่อประสิทธิภาพน้อยมาก อย่างไรก็ตาม ตัวกรองที่ทำการเบลอทุกประเภทมักจะทำงานช้ากว่าตัวกรองอื่นๆ ซึ่งแน่นอนว่ารวมไปถึงคำว่า "เบลอ" และ "เงาตกกระทบ" ซึ่งไม่ได้หมายความว่าคุณไม่ควรใช้เอฟเฟกต์เหล่านี้ แต่การทำความเข้าใจวิธีการทำงานอาจช่วยได้
เมื่อใช้ blur ระบบจะผสมสีจากพิกเซลรอบๆ พิกเซลเอาต์พุตเพื่อสร้างผลลัพธ์เบลอ ดังนั้น สมมติว่าพารามิเตอร์ radius ของคุณคือ 2 ตัวกรองจะต้องมองที่ 2 พิกเซลในทุกทิศทางรอบพิกเซลเอาต์พุตแต่ละพิกเซลเพื่อสร้างสีคละสี กรณีนี้เกิดขึ้นกับพิกเซลเอาต์พุตแต่ละพิกเซล จึงมีการคำนวณมากมายซึ่งจะใหญ่ขึ้นเมื่อคุณเพิ่ม radius เนื่องจาก blur จะมองไปทุกทิศทาง การเพิ่ม "รัศมี" เป็น 2 เท่าหมายความว่าคุณจะต้องดูพิกเซลมากขึ้น 4 เท่า ซึ่งในความเป็นจริงแล้วเวลาที่เพิ่มขึ้นเป็น 4 เท่าสำหรับ radius ในแต่ละคู่ ตัวกรอง drop-shadow มี blur เป็นส่วนหนึ่งของเอฟเฟกต์ จึงทำงานเหมือนกับ blur เมื่อคุณเปลี่ยนส่วน radius และ spread ของพารามิเตอร์ shadow
blur ไม่ได้สูญเสียไปทั้งหมดเพราะในบางแพลตฟอร์ม คุณอาจใช้ GPU เพื่อเร่งการทำงานได้ แต่ไม่จำเป็นว่าจะต้องพร้อมใช้งานในทุกเบราว์เซอร์ หากไม่แน่ใจ วิธีที่ดีที่สุดคือการทดลองใช้ "รัศมี" ที่ให้ผลที่คุณต้องการ จากนั้นพยายามลดพื้นที่มากที่สุดเท่าที่จะเป็นไปได้ ในขณะที่ยังคงรักษาองค์ประกอบภาพที่ยอมรับได้เอาไว้ การปรับแต่งด้วยวิธีนี้จะช่วยให้ผู้ใช้รู้สึกพึงพอใจยิ่งขึ้น โดยเฉพาะเมื่อใช้เว็บไซต์จากโทรศัพท์
หากคุณใช้ตัวกรองแบบ url ที่อ้างอิงฟิลเตอร์ SVG ฟิลเตอร์เหล่านี้อาจมีเอฟเฟกต์ฟิลเตอร์ที่กำหนดเองได้ ทั้งนี้โปรดทราบว่าฟิลเตอร์เหล่านั้นอาจทำงานช้าด้วยเช่นกัน ดังนั้นลองตรวจสอบให้แน่ใจว่าคุณทราบว่าเอฟเฟกต์ของฟิลเตอร์ใช้ทำอะไรและทดลองในอุปกรณ์เคลื่อนที่เพื่อให้แน่ใจว่าประสิทธิภาพการทำงานเป็นปกติ
ความพร้อมใช้งานในเบราว์เซอร์ที่ทันสมัย
ขณะนี้เอฟเฟกต์ CSS filter จำนวนหนึ่งพร้อมให้ใช้งานในเบราว์เซอร์ที่ใช้ WebKit และ Mozilla เราคาดว่าจะได้พบกับฟีเจอร์เหล่านี้เร็วๆ นี้ใน Opera และ IE10 เนื่องจากข้อกำหนดยังอยู่ระหว่างการพัฒนา ผู้ให้บริการเบราว์เซอร์บางรายจึงติดตั้งใช้งานสิ่งนี้โดยใช้คำนำหน้าของผู้ให้บริการ ดังนั้นใน WebKit คุณต้องใช้ -webkit-filter ใน Mozilla คุณจะต้องใช้-moz-filter และคอยติดตามการติดตั้งใช้งานเบราว์เซอร์อื่นๆ ที่จะปรากฏ
บางเบราว์เซอร์อาจไม่รองรับเอฟเฟกต์ฟิลเตอร์ทั้งหมดในทันที ดังนั้นระยะไมล์จึงอาจแตกต่างกันไป ปัจจุบันเบราว์เซอร์ Mozilla รองรับเฉพาะฟังก์ชัน filter: url() เท่านั้นโดยไม่ต้องใช้คำนำหน้าผู้ให้บริการ เนื่องจากการนำไปใช้งานนั้นมาก่อนฟังก์ชันเอฟเฟกต์อื่นๆ
เราได้สรุปผลกระทบของตัวกรอง CSS ที่มีอยู่ในเบราว์เซอร์ต่างๆ ด้านล่าง พร้อมด้วยตัวบ่งชี้ประสิทธิภาพคร่าวๆ ว่าเมื่อนำไปใช้กับซอฟต์แวร์ โปรดทราบว่า เบราว์เซอร์ที่ทันสมัยจำนวนหนึ่งเริ่มนำเบราว์เซอร์เหล่านี้ไปใช้กับฮาร์ดแวร์ (GPU Accelerated) เมื่อสร้างฟีเจอร์นี้ด้วยการรองรับ GPU ประสิทธิภาพก็จะดีขึ้นอย่างมากสำหรับเอฟเฟกต์ที่ช้า และเช่นเคย การทดสอบในเบราว์เซอร์ต่างๆ เป็นวิธีประเมินประสิทธิภาพที่ดีที่สุด
| เอฟเฟกต์ฟิลเตอร์ | การสนับสนุนเบราว์เซอร์ | การแสดง |
|---|---|---|
| สีเทา | Chrome | เร็วมาก |
| ซีเปีย | Chrome | เร็วมาก |
| อิ่มตัว | Chrome | เร็วมาก |
| หมุนโทนสี | Chrome | เร็ว |
| กลับ | Chrome | เร็วมาก |
| opacity | Chrome | อาจช้าได้ |
| ความสว่าง | Chrome | เร็ว |
| ความเปรียบต่าง | Chrome | เร็ว |
| เบลอ | Chrome | ช้าเว้นแต่จะเร่ง |
| drop-shadow | Chrome | อาจช้าได้ |
| URL | Chrome และ Mozilla | แปรผันจากเร็วไปช้า |
แหล่งข้อมูลที่ดีอื่นๆ
แอปพลิเคชันการวาดภาพแนวนามธรรมแบบอินเทอร์แอกทีฟด้วยฟิลเตอร์สุดเก๋ที่ช่วยให้คุณทดลองและแชร์งานศิลปะของคุณได้ อย่าลืมดูหน้าฟิลเตอร์แบบอินเทอร์แอกทีฟที่ยอดเยี่ยมของ Eric Bidelman บทแนะนำที่ดีเกี่ยวกับฟิลเตอร์พร้อมตัวอย่าง ข้อกำหนดฉบับร่างของ W3C filter Effects 1.0 อย่างเป็นทางการ http://dev.w3.org/fxtf/filters/ ตัวอย่าง UI ที่สร้างขึ้นโดยใช้ฟิลเตอร์