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

มันทำงานอย่างไร?

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

ตัวกรอง: ตัวกรอง (ค่า);

ตามที่คุณอาจคาดหวัง คุณสมบัตินี้จำเป็นต้องใช้คำนำหน้าเบราว์เซอร์ แต่ต่อไป ในขณะนี้, เท่านั้น -เว็บคิท-(Chrome และ Safari) เป็นเครื่องมือเบราว์เซอร์เดียวที่รองรับคุณสมบัตินี้

ตัวกรอง Webkit: filter(value) ;
-moz-filter: ตัวกรอง (ค่า) ;
-o-ตัวกรอง: ตัวกรอง (ค่า) ;
-ms-filter: ตัวกรอง (ค่า) ;

การกรอง

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

ตัวกรอง: เบลอ(5px ) ความสว่าง(0.5 ) ;

มีตัวกรองหลายตัวที่จะไม่ได้กล่าวถึงด้านล่างนี้ แต่สามารถนำไปใช้งานได้อย่างง่ายดายอยู่แล้ว CSS ที่มีอยู่(ความโปร่งใสและเงา) นี่คือภาพต้นฉบับที่เราจะใช้สาธิตวิธีการทำงานของตัวกรอง:

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

เบลอ

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

ตัวกรอง: เบลอ(5px ) ;
// เฉพาะเบราว์เซอร์
-webkit-ตัวกรอง: เบลอ(5px);
-moz-filter: เบลอ (5px ) ;
-o-ตัวกรอง: เบลอ(5px ) ;
-ms-filter: เบลอ(5px ) ;

ความสว่าง

ความสว่างวัดจากศูนย์ถึงหนึ่ง 1 คือ ความสว่างเต็มที่(สีขาว) และ 0 คือความสว่างเริ่มต้น

ตัวกรอง: ความสว่าง(0.2 ) ;
// เฉพาะเบราว์เซอร์
-webkit-ตัวกรอง: ความสว่าง(0.2 ) ;
-moz-filter: ความสว่าง (0.2 ) ;
-o-ตัวกรอง: ความสว่าง(0.2 ) ;
-ms-filter: ความสว่าง (0.2 ) ;

ความอิ่มตัว

ความอิ่มตัวจะวัดเป็นเปอร์เซ็นต์

ตัวกรอง: อิ่มตัว(50% ) ;
// เฉพาะเบราว์เซอร์
-webkit-ตัวกรอง: อิ่มตัว (50% ) ;
-moz-filter: อิ่มตัว (50% ) ;
-o-ตัวกรอง: อิ่มตัว(50% ) ;
-ms-filter: อิ่มตัว (50% ) ;

การหมุนโทน

ฟิลเตอร์นี้ช่วยให้คุณเปลี่ยนโทนได้โดยการหมุน (ลองนึกถึงวงล้อสีที่คุณหมุน) มันวัดเป็นองศา

ตัวกรอง: หมุนสี (20deg);
// เฉพาะเบราว์เซอร์
-webkit-filter: hue-rotate(20deg) ;
-moz-filter: หมุนสี (20deg);
-o-filter: หมุนสี (20deg);
-ms-filter: หมุนสี (20deg);

ตัดกัน

ความคมชัดจะถูกวัดเป็นเปอร์เซ็นต์อีกครั้ง 100% เป็นค่าเริ่มต้น 0% จะสร้างภาพสีดำสนิท อะไรก็ตามที่มากกว่า 100% จะเพิ่มความเปรียบต่าง!

ตัวกรอง: ความคมชัด(150% ) ;
// เฉพาะเบราว์เซอร์
-webkit-ตัวกรอง: ความคมชัด(150% ) ;
-moz-filter: ความคมชัด (150% ) ;
-o-ตัวกรอง: ความคมชัด(150% ) ;
-ms-filter: ความคมชัด (150% ) ;

การผกผัน

วัดเป็นเปอร์เซ็นต์ด้วย ค่าที่ใช้ได้มีตั้งแต่ 0% ถึง 100% น่าแปลกที่ในขณะนี้ webkit ไม่รองรับการกลับรายการหากมีค่าน้อยกว่า 100%

ตัวกรอง: กลับด้าน (100% ;
// เฉพาะเบราว์เซอร์
-webkit-filter: กลับด้าน (100%) ;
-moz-filter: กลับด้าน (100% ) ;
-o-ตัวกรอง: กลับด้าน (100% ) ;
-ms-filter: กลับด้าน (100% ) ;

การฟอกสี

ป้อนเปอร์เซ็นต์ที่คุณต้องการลดความอิ่มตัวของภาพอีกครั้ง ค่าที่ใช้ได้มีตั้งแต่ 0% ถึง 100%

ตัวกรอง: ระดับสีเทา(100% ) ;
// เฉพาะเบราว์เซอร์
-webkit-ตัวกรอง: ระดับสีเทา (100% ) ;
-moz-filter: ระดับสีเทา (100% ) ;
-o-ตัวกรอง: ระดับสีเทา (100% ) ;
-ms-filter: ระดับสีเทา (100% ) ;

ซีเปีย

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

ฟิลเตอร์: ซีเปีย(100% ) ;
// เฉพาะเบราว์เซอร์
-webkit-ตัวกรอง: ซีเปีย(100% ) ;
-moz-ฟิลเตอร์: ซีเปีย(100% ) ;
-o-ฟิลเตอร์: ซีเปีย(100% ) ;
-ms-กรอง: ซีเปีย(100% ) ;

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

	เว็บคิท	โมซิลลา	ตรีศูล	เพรสโต
เบลอ	การทดลอง	เลขที่	เลขที่	เลขที่
ความสว่าง
ความอิ่มตัว
หมุนโทนเสียง
ตัดกัน
การผกผัน	การผกผันแบบเต็มเท่านั้น
การฟอกสี	การทดลอง
ซีเปีย

หากคุณมีคำถามใด ๆ เราขอแนะนำให้ใช้ของเรา

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

100 % ) ; }

การตั้งค่าคลาสสำหรับรูปภาพก็ทำได้ง่ายเช่นกัน:

การเพิ่มตัวกรอง SVG

โค้ด CSS ที่แสดงด้านบนใช้ได้กับเบราว์เซอร์รุ่นใหม่ทั้งหมด ทั้งเดสก์ท็อปและเดสก์ท็อป อุปกรณ์เคลื่อนที่รวมถึงเบราว์เซอร์ Microsoft Edge

เพื่อให้บรรลุผลแบบเดียวกันใน Firefox ก่อนเวอร์ชัน 35 คุณจะต้องใช้ตัวกรอง SVG ซึ่งเราจะสร้างในไฟล์แยกต่างหากที่เรียกว่า desaturate.svg ไฟล์นี้จะมีรหัสต่อไปนี้:

"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" /> < /filter> < /svg>

หากโค้ด SVG ด้านบนดูน่ากลัวเล็กน้อยและอาร์เรย์ซับซ้อนเกินไป ไม่ต้องกังวล นี่เป็นโค้ดชิ้นหนึ่งที่เราแนะนำให้คัดลอกและวางเป็นสูตรมาตรฐานในการสร้างภาพขาวดำ

พร้อมด้วยไฟล์ SVG นี้ที่อยู่ถัดจาก หน้า HTMLและรูปภาพที่ต้องการ โค้ด CSS จะถูกเสริมด้วยบรรทัดต่อไปนี้:

Img.desaturate ( ตัวกรอง: ระดับสีเทา( 100 % - ตัวกรอง: url (desaturate .svg #ระดับสีเทา) ; }

การเพิ่มการรองรับเบราว์เซอร์ Internet Explorer

เพื่อให้เอฟเฟกต์ทำงานในเบราว์เซอร์ อินเทอร์เน็ตเอ็กซ์พลอเรอร์จากเวอร์ชัน 6 ถึง 9 เราใช้ตัวกรองที่เป็นกรรมสิทธิ์ของ Microsoft แบบง่าย:

Img.desaturate ( ตัวกรอง: สีเทา ; ตัวกรอง: ระดับสีเทา( 100 % - ตัวกรอง: url (desaturate .svg #ระดับสีเทา) ; }

หากคุณต้องการเพิ่มการสนับสนุน รุ่นที่ล้าสมัยเบราว์เซอร์บนเอ็นจิ้น Webkit มาขยายโค้ดด้วยวิธีนี้:

Img.desaturate ( -webkit-filter: ระดับสีเทา(1 ) ; -webkit-filter: ระดับสีเทา( 100 % - ตัวกรอง: สีเทา ; 100 % - ตัวกรอง: url (desaturate .svg #ระดับสีเทา) ; }

ตัวกรอง: ระดับสีเทา( วิธีการนี้ใช้ไม่ได้กับอินเทอร์เน็ตเบราว์เซอร์

Explorer 10 และ 11 เวอร์ชัน หากคุณต้องการสร้างเอฟเฟ็กต์ภาพที่เหมือนกันในทุกเบราว์เซอร์ คุณสามารถใช้วิธีแก้ปัญหาในภาษาการเขียนโปรแกรม Javascript สำหรับเบราว์เซอร์ที่แตกต่างกัน หรือตัวอย่างเช่น สคริปต์ Greyscale.js

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

และในแท็ก 100 % Img.desaturate ( -webkit-filter: ระดับสีเทา( 100 % - ตัวกรอง: ระดับสีเทา( - ตัวกรอง: สีเทา ; ตัวกรอง: url () ; }

"ข้อมูล:รูปภาพ/svg+xml;utf8,

#เฉดสีเทา"และถึงระดับการพัฒนาที่สามารถรับมือกับฟังก์ชันที่สำคัญบางอย่างของบรรณาธิการกราฟิกได้ ตัวอย่างนี้คือตัวกรอง CSS ซึ่งคุณสามารถสร้างเอฟเฟกต์ที่สวยงามให้กับรูปภาพได้

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

แต่ยังคงมีข้อเสียเปรียบเล็กน้อยประการหนึ่งสำหรับตัวกรอง CSS - เว็บเบราว์เซอร์บางตัวไม่รองรับเอฟเฟ็กต์ภาพ แน่นอนว่าเป็นเพียงเรื่องของเวลาเท่านั้น และเมื่อถึงเวลา “x” นักพัฒนาซอฟต์แวร์ก็ต้องเตรียมตัวให้พร้อม สำหรับตอนนี้ เรามาดูกันว่ามีอะไรบ้างที่ได้ดำเนินการไปแล้ว

รองรับเบราว์เซอร์สำหรับตัวกรอง CSS

โดยพื้นฐานแล้วเบราว์เซอร์ยอดนิยมทั้งหมด Firefox, Chrome, Opera มีความสัมพันธ์แบบ "เป็นมิตร" กับเอฟเฟกต์ฟิลเตอร์ ไม่สามารถพูดสิ่งเดียวกันได้เกี่ยวกับ IE ซึ่งปฏิเสธที่จะรองรับเอฟเฟกต์โดยสิ้นเชิงแม้ในเวอร์ชันล่าสุดก็ตาม

เบราว์เซอร์	นักสำรวจ	โครเมียม	ไฟร์ฟอกซ์	ซาฟารี	โอเปร่า	หุ่นยนต์	ไอโอเอส
เวอร์ชัน	เลขที่	31+	35+	7+	18+	4.4+	6+
กรอง	—	(-เว็บคิท-)	+	(-เว็บคิท-)	(-เว็บคิท-)	(-เว็บคิท-)	(-เว็บคิท-)

ฟังก์ชั่นและไวยากรณ์ของตัวกรอง CSS

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

ไวยากรณ์

ตัวกรอง: ชื่อตัวกรอง (เปอร์เซ็นต์ของค่า); ตัวกรอง: url(img.svg); ตัวกรอง: เบลอ (10px); ตัวกรอง: ความสว่าง (0.9); ตัวกรอง: คอนทราสต์ (150%); ตัวกรอง: เงาหล่น (5px 5px 10px สีดำ); ฟิลเตอร์: ระดับสีเทา (80%); ตัวกรอง: หมุนสี (60deg); ตัวกรอง: กลับด้าน (80%); ตัวกรอง: ความทึบ (50%); ตัวกรอง: อิ่มตัว (50%); ฟิลเตอร์: ซีเปีย (40%); /* ใช้หลายตัวกรอง */ ตัวกรอง: คอนทราสต์ (150%) ระดับสีเทา (80%);

รายการตัวกรอง

กรอง	คำอธิบาย
เบลอ (พิกเซล)	ฟิลเตอร์สำหรับการเบลอภาพ ระดับความเบลอจะแสดงเป็นพิกเซล หากไม่ได้ระบุตัวเลข ค่าเริ่มต้นจะเป็น 0
วางเงา()	เงา. ทางเลือกอื่นนอกเหนือจากคุณสมบัติ box-shadow ที่มีพารามิเตอร์คล้ายกันและมีลำดับการเขียนเหมือนกัน ข้อยกเว้นคือค่าที่สี่ "stretch": เบราว์เซอร์เกือบทั้งหมดไม่รองรับ
ระดับสีเทา (%)	ฟิลเตอร์ "ลดสี" ใช้เฉดสีเทากับรูปภาพตามเปอร์เซ็นต์ที่คุณระบุ ไม่อนุญาตให้ใช้ค่าลบ และความริเริ่มของรูปภาพคือ 0
ความสว่าง (%)	ปรับความสว่างของภาพ ค่า 100% แสดงจุดเริ่มต้นของความสว่าง มีการปรับเปลี่ยนทั้งเชิงลบ (-50%) และบวก (150%)
ตัดกัน (%)	ปรับความคมชัดของภาพ เช่นเดียวกับตัวกรองก่อนหน้า ค่า 100% จะแสดงจุดเริ่มต้น การเปลี่ยนแปลงสามารถตั้งค่าเป็นลบ (-20%) หรือบวก (120%)
หมุนสี (องศา)	การซ้อนทับโทนสีแบบหมุน ขึ้นอยู่กับระดับที่ระบุ (ตั้งแต่ 0 องศาถึง 360 องศา) รูปภาพจะถูกปรับเป็นสี ซึ่งกำหนดโดยวงล้อสี
กลับด้าน (%)	การกลับภาพ ใช้ค่าตั้งแต่ 0 ถึง 100% โดยไม่มีพารามิเตอร์ลบ
อิ่มตัว (%)	ความอิ่มตัวของภาพ ตำแหน่งเริ่มต้นถูกกำหนดไว้ที่ 100% และไม่มีค่าลบ
ซีเปีย (%)	เอฟเฟกต์ซีเปีย ความแปลกใหม่ของภาพถูกกำหนดไว้ที่ 0% และสามารถใช้ได้ถึง 100% โดยไม่มีการปฏิเสธ
ความทึบ (%)	ความโปร่งใสของภาพ ตัวกรองอื่นที่มีคุณสมบัติทึบแสงคล้ายกันพร้อมวิธีการใช้งานเดียวกัน อนุญาตให้ตั้งค่าได้ตั้งแต่ 0 ถึง 100% โดยไม่มีพารามิเตอร์ลบ
URL()	ลิงก์ CSS ไปยังองค์ประกอบ SVG พร้อมด้วย #id เฉพาะ
อักษรย่อ	ตั้งค่าเริ่มต้นของคุณสมบัติ
สืบทอด	สืบทอดค่าทรัพย์สินทั้งหมดขององค์ประกอบหลัก

ตัวอย่างของตัวกรอง CSS

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

ฟิลเตอร์เบลอ

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

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

ต้นฉบับ

กรอง

เอฟเฟกต์โฮเวอร์

/*กฎคงที่*/ .efbl1 img( filter: blur(2px); -webkit-filter: blur(2px); ) /*for hover effect*/ .efbl2 img( transition: all 0.6s easy 0s; ) :hover img( filter: blur(4px); -webkit-filter: blur(4px); transition: ทั้งหมด 0.6s คลาย 0s; )

กรองเงา

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

ลำดับการเขียนมีดังนี้: 5px/-5px (ออฟเซ็ตแนวนอน), 5px/-5px (ออฟเซ็ตแนวตั้ง), 15px (รัศมีเงาเบลอ), 5px/-5px (ยืดเงา), สีดำ (สี) ตัวกรองรองรับไวยากรณ์ทั้งหมด ยกเว้นการยืดและแทรกค่า รวมถึงการเพิ่มเงาหลายรายการโดยคั่นด้วยเครื่องหมายจุลภาค แต่ถึงแม้จะมีทั้งหมดนี้ แต่ก็มีข้อดีอยู่บ้าง เช่น ตัวกรองจะนำองค์ประกอบหลอกมาพิจารณา ซึ่งช่วยให้คุณแสดงรูปร่างที่แน่นอนของเงาขององค์ประกอบได้

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

ต้นฉบับ

กรอง

เอฟเฟกต์โฮเวอร์

/*กฎคงที่*/ .efdrswd1 img( ตัวกรอง: drop-shadow (6px 7px 3px rgba (0, 0, 0, 0.4)); -webkit-filter: drop-shadow (6px 7px 3px rgba (0, 0, 0 , 0.4)); ) /*สำหรับเอฟเฟกต์โฮเวอร์*/ .efdrswd2 img( การเปลี่ยนแปลง: ทั้งหมด 0.6s บรรเทา 0s; ) .efdrswd2:hover img( ตัวกรอง: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); การเปลี่ยนแปลง: ทั้งหมด 0.6s ลดความยุ่งยาก 0s)

ตัวกรองการลดสี

สไตล์การถ่ายภาพคลาสสิกตลอดกาลในทิศทางที่ถูกต้อง ตัวกรองอนุญาตเพียงค่าเดียว - บวก เฉดสีเทาจะเปลี่ยนสีของรูปภาพได้อย่างราบรื่นทั้งนี้ขึ้นอยู่กับเปอร์เซ็นต์ที่ระบุ นอกจากนี้ แทนที่จะใช้เปอร์เซ็นต์ คุณสามารถใช้เศษส่วนเป็นจำนวนเต็มได้ (0.01/1)

ต้นฉบับ

กรอง

เอฟเฟกต์โฮเวอร์

/*กฎคงที่*/ .efgrays1 img( ตัวกรอง: ระดับสีเทา (90%); -webkit-filter: ระดับสีเทา (90%); ) /*สำหรับเอฟเฟกต์โฮเวอร์*/ .efgrays2 img( การเปลี่ยนแปลง: ทั้งหมด 0.6s ลดความยุ่งยาก 0s; ) .efgrays2:hover img( ตัวกรอง: ระดับสีเทา (90%); -webkit-filter: ระดับสีเทา (90%); การเปลี่ยนแปลง: ทั้งหมด 0.6 วินาทีค่อยๆ 0 วินาที; )

ตัวกรองความสว่าง

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

ต้นฉบับ

กรอง

เอฟเฟกต์โฮเวอร์

/*กฎคงที่*/ .efbrig1 img( ตัวกรอง: ความสว่าง(150%); -webkit-filter: ความสว่าง(150%); ) /*สำหรับเอฟเฟกต์โฮเวอร์*/ .efbrig2 img( การเปลี่ยนแปลง: 0.6 วินาทีทั้งหมดค่อยๆ 0s; ) .efbrig2:hover img( ตัวกรอง: ความสว่าง (150%); -webkit-filter: ความสว่าง (150%); การเปลี่ยนแปลง: 0.6 วินาทีทั้งหมดค่อยๆ 0 วินาที; )

ตัวกรองความคมชัด

วิธีง่ายๆ ในการทำให้ภาพสื่ออารมณ์ได้มากขึ้นคือการทดลองตั้งค่าความสว่างของส่วนที่สว่างที่สุดและมืดที่สุดของภาพ ฟิลเตอร์คอนทราสต์พร้อมที่จะช่วยเหลือในเรื่องนี้ เช่นเดียวกับพารามิเตอร์อื่นๆ ไม่รวมค่าลบ (-150%) และตำแหน่งเริ่มต้นจะแสดงที่ 100% นอกจากเปอร์เซ็นต์แล้ว ยังอนุญาตให้ใช้เศษส่วน (1.5) ได้อีกด้วย

ต้นฉบับ

กรอง

เอฟเฟกต์โฮเวอร์

/*กฎคงที่*/ .efcontr1 img( ตัวกรอง: คอนทราสต์ (150%); -webkit-filter: คอนทราสต์ (150%); ) /*สำหรับเอฟเฟกต์โฮเวอร์*/ .efcontr2 img( การเปลี่ยนแปลง: 0.6 วินาทีทั้งหมดค่อยๆ 0s; ) .efcontr2:hover img( filter: contrast(150%); -webkit-filter: contrast(150%); transition: ทั้งหมด 0.6s คลาย 0s; )

ฟิลเตอร์โทนสี

เทคนิคการออกแบบที่ยอดเยี่ยมในการออกแบบภาพที่เข้ากับสไตล์การออกแบบทรัพยากรหลัก แนวคิดคือการซ้อนทับเฉดสีที่เลือกไว้บนภาพต้นฉบับ อัตราส่วนจะออกมาขึ้นอยู่กับระดับที่กำหนด ซึ่งระบุจุดสีบนวงล้อสี

หากค่าเป็นบวก (150deg) การหมุนจะเกิดขึ้นตามเข็มนาฬิกา ดังนั้นหากเป็นลบให้ทวนเข็มนาฬิกา ในสองตำแหน่งจะเริ่มจาก 0deg ถึง 360deg

ต้นฉบับ

กรอง

เอฟเฟกต์โฮเวอร์

/*กฎคงที่*/ .efhrotai1 img( ตัวกรอง: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); ) /*สำหรับเอฟเฟกต์โฮเวอร์*/ .efhrotai2 img( การเปลี่ยนแปลง: ทั้งหมด 0.6 วินาที ลดความยุ่งยาก 0 วินาที ; ) .efhrotai2:hover img( ตัวกรอง: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); การเปลี่ยนแปลง: ทั้งหมด 0.6s คลาย 0s; )

ตัวกรองผกผัน

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

ต้นฉบับ

กรอง

เอฟเฟกต์โฮเวอร์

/*กฎคงที่*/ .efinve1 img( filter: invert(100%); -webkit-filter: invert(100%); ) /*for hover effect*/ .efinve2 img( transition: all 0.6s ผ่อนผัน 0s; ) .efinve2:hover img( filter: invert(100%); -webkit-filter: invert(100%); transition: ทั้งหมด 0.6s คลาย 0s; )

ตัวกรองความอิ่มตัว

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

ต้นฉบับ

กรอง

เอฟเฟกต์โฮเวอร์

/*กฎคงที่*/ .efsatut1 img( ตัวกรอง: อิ่มตัว (165%); -webkit-filter: อิ่มตัว (165%); ) /*สำหรับเอฟเฟกต์โฮเวอร์*/ .efsatut2 img( การเปลี่ยนแปลง: ทั้งหมด 0.6s ลดความยุ่งยาก 0s; ) .efsatut2:hover img( filter: saturate(165%); -webkit-filter: saturate(165%); transition: ทั้งหมด 0.6s คลาย 0s; )

ฟิลเตอร์ซีเปีย

เลียนแบบเอฟเฟกต์ภาพถ่ายเก่า (โทนสีน้ำตาลเล็กน้อย) ทำให้ได้ภาพสไตล์ย้อนยุคซึ่งได้รับความนิยมเป็นพิเศษ ฟิลเตอร์ซีเปียสามารถปรับได้ตั้งแต่ 0% (ตำแหน่งโฮม) ถึง 100%

ต้นฉบับ

กรอง

เอฟเฟกต์โฮเวอร์

/*กฎคงที่*/ .efsepiaa1 img( filter: sepia(100%); -webkit-filter: sepia(100%); ) /*for hover effect*/ .efsepiaa2 img( การเปลี่ยนแปลง: ทั้งหมด 0.6 วินาที ลดความยุ่งยาก 0s; ) .efsepiaa2:hover img( filter: sepia(100%); -webkit-filter: sepia(100%); transition: ทั้งหมด 0.6s คลาย 0s; )

กรองความโปร่งใส

ตัวกรองที่คล้ายกับคุณสมบัติความทึบจากตารางเรียงซ้อนเวอร์ชัน 3 ไวยากรณ์จะเหมือนกัน และค่าความโปร่งใสสามารถปรับได้ตั้งแต่ 0% ถึง 100% (ตำแหน่งเดิม)

ต้นฉบับ

กรอง

เอฟเฟกต์โฮเวอร์

/*กฎคงที่*/ .efopaty1 img( ตัวกรอง: ความทึบ (50%); -webkit-filter: ความทึบ (50%); ) /*สำหรับเอฟเฟกต์โฮเวอร์*/ .efopaty2 img( การเปลี่ยนแปลง: 0.6 วินาทีทั้งหมดค่อยๆ 0s; ) .efopaty2:hover img( filter: opacity(50%); -webkit-filter: opacity(50%); transition: ทั้งหมด 0.6s คลาย 0s; )

ลิงค์ตัวกรอง

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

เครื่องกำเนิดตัวกรอง CSS

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

บทสรุป

การตรวจสอบกลายเป็นเรื่องที่ค่อนข้างใหญ่ แต่ฉันหวังว่ามันจะเป็นประโยชน์กับใครบางคนในทางปฏิบัติ นอกจากนี้อย่าลืมรวมตัวกรองเข้าด้วยกัน หนึ่งอันดี แต่สองอันจะดีกว่าในบางกรณี

ตัวกรอง CSS3สร้างเอฟเฟกต์ภาพในเบราว์เซอร์ที่คล้ายกับฟิลเตอร์ Photoshop คุณสามารถเพิ่มตัวกรองได้ไม่เฉพาะกับรูปภาพเท่านั้น แต่ยังรวมถึงองค์ประกอบที่ไม่ว่างเปล่าด้วย

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

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

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

คุณสามารถใช้ตัวกรองหลายตัวพร้อมกันได้ วิธีคลาสสิกในการใช้เอฟเฟกต์ดังกล่าวคือเมื่อโฮเวอร์เหนือองค์ประกอบ: โฮเวอร์

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

เช่น:ไม่สนับสนุน
ขอบ: 13.0 ยกเว้น URL()
ไฟร์ฟอกซ์: 35.0
โครเมียม: 18.0 -เว็บคิท-
ซาฟารี: 9.1, 6.0 -เว็บคิท-
โอเปร่า: 40.0, 15.0 -เว็บคิท-
iOS ซาฟารี: 9.3, 6.1 -เว็บคิท-
เบราว์เซอร์ Android: 53.0, 4.4 -เว็บคิท-
โครเมียม สำหรับ Android: 55.0, 47.0 -เว็บคิท-

กรอง
เบลอ()	ค่าจะถูกระบุเป็นหน่วยความยาว เช่น px, em ใช้การเบลอแบบเกาส์เซียนกับภาพต้นฉบับ ยิ่งค่ารัศมีมาก ความเบลอก็จะยิ่งมากขึ้น หากไม่มีการระบุค่ารัศมี ค่าเริ่มต้นคือ 0
ความสว่าง()	ค่าถูกระบุเป็น % หรือเศษส่วนทศนิยม เปลี่ยนความสว่างของภาพ ยิ่งค่าสูง ภาพก็จะยิ่งสว่างขึ้น ค่าเริ่มต้นคือ 1
ตัดกัน()	ค่าถูกระบุเป็น % หรือเศษส่วนทศนิยม ปรับความคมชัดของภาพ เช่น ความแตกต่างระหว่างบริเวณที่มืดที่สุดและสว่างที่สุดของภาพ/พื้นหลัง ค่าเริ่มต้นคือ 100% ค่าศูนย์จะซ่อนรูปภาพต้นฉบับไว้ใต้พื้นหลังสีเทาเข้ม ค่าที่เพิ่มขึ้นจาก 0 ถึง 100% หรือ 0 ถึง 1 จะค่อยๆ เปิดภาพต้นฉบับไปยังจอแสดงผลดั้งเดิม และค่าด้านบนจะเพิ่มความคมชัดระหว่างไฮไลท์และเงา
วางเงา()	ตัวกรองทำหน้าที่คล้ายกับคุณสมบัติกล่องเงาและเงาข้อความ ใช้ค่าต่อไปนี้: X offset Y offset เบลอ ยืดสีเงา คุณสมบัติที่โดดเด่นของตัวกรองคือการเพิ่มเงาให้กับองค์ประกอบและเนื้อหาโดยคำนึงถึงความโปร่งใสเช่น หากองค์ประกอบมีข้อความอยู่ข้างใน ตัวกรองจะเพิ่มเงาให้กับทั้งข้อความและขอบที่มองเห็นได้ของบล็อก ต่างจากตัวกรองอื่น ๆ สำหรับตัวกรองนี้จำเป็นต้องตั้งค่าพารามิเตอร์ (ค่าต่ำสุดคือค่าออฟเซ็ต)
ระดับสีเทา()	แยกสีทั้งหมดออกจากรูปภาพ ทำให้เอาต์พุตเป็นภาพขาวดำ ค่าถูกระบุเป็น % หรือเศษส่วนทศนิยม ยิ่งค่าสูง เอฟเฟกต์ก็จะยิ่งแข็งแกร่งขึ้น
สีหมุน()	เปลี่ยนสีของภาพขึ้นอยู่กับมุมการหมุนที่ระบุในวงล้อสี ค่าถูกระบุเป็นองศาตั้งแต่ 0deg ถึง 360deg 0deg เป็นค่าเริ่มต้น ซึ่งหมายความว่าไม่มีผลกระทบ
กลับด้าน()	ฟิลเตอร์ทำให้ภาพเป็นลบ ค่าระบุเป็น % 0% ไม่ใช้ฟิลเตอร์ 100% จะแปลงสีโดยสมบูรณ์
ความทึบ()	ตัวกรองทำงานคล้ายกับคุณสมบัติความทึบ โดยเพิ่มความโปร่งใสให้กับองค์ประกอบ คุณสมบัติที่โดดเด่นคือเบราว์เซอร์มีให้ การเร่งความเร็วด้วยฮาร์ดแวร์สำหรับไส้กรองที่ช่วยเพิ่มประสิทธิภาพ โบนัสเพิ่มเติมคือสามารถรวมฟิลเตอร์เข้ากับฟิลเตอร์อื่น ๆ ได้ในเวลาเดียวกัน ทำให้เกิดเอฟเฟกต์ที่น่าสนใจ ค่านี้ตั้งเป็น % เท่านั้น 0% จะทำให้องค์ประกอบโปร่งใสโดยสมบูรณ์ และ 100% ไม่มีผลกระทบ
อิ่มตัว()	ควบคุมความอิ่มตัวของสี โดยทำงานบนหลักการของฟิลเตอร์คอนทราสต์ ค่า 0% จะลบสีออก ในขณะที่ 100% ไม่มีผลกระทบ ค่าตั้งแต่ 0% ถึง 100% จะลดความอิ่มตัวของสี ค่าที่สูงกว่า 100% จะเพิ่มความอิ่มตัวของสี ค่าสามารถระบุเป็น % หรือเป็นจำนวนเต็ม โดย 1 เทียบเท่ากับ 100%
ซีเปีย()	เอฟเฟกต์ที่เลียนแบบสมัยโบราณและ "ย้อนยุค" ค่า 0% จะไม่เปลี่ยนแปลง รูปร่างองค์ประกอบและสร้างเอฟเฟ็กต์ซีเปียได้เต็ม 100%
URL()	ฟังก์ชันยอมรับตำแหน่งของไฟล์ XML ภายนอกที่มีตัวกรอง svg หรือจุดยึดของตัวกรองที่อยู่ในเอกสารปัจจุบัน
ไม่มี	ค่าเริ่มต้น แสดงว่าไม่มีผล
อักษรย่อ	ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น
สืบทอด	สืบทอดค่าคุณสมบัติจากองค์ประกอบหลัก

สวัสดี วันนี้คุณจะไม่เซอร์ไพรส์ใครด้วยเอฟเฟกต์สวยๆ บนเว็บไซต์ บางคนทำสิ่งนี้ใน Flash มาเป็นเวลา 10 ปีแล้ว บางคนยังไม่ได้หยุดทำใน Javascript แต่คนที่ทันสมัยที่สุดใช้ CSS3 มาเป็นเวลานาน นี่คือสิ่งที่เราจะทำในวันนี้

มาเรียนรู้วิธีการลดสีกัน รูปภาพซีเอสเอส(css ภาพระดับสีเทา) และมาทำมันให้สวยงามกันเถอะ

เรามาเริ่มกันด้วยสิ่งง่ายๆ เราต้องการภาพถ่ายสวยๆ ลองทำดังนี้:

เราจำเป็นต้องลดความอิ่มตัวของสี (ลดความอิ่มตัวของรูปภาพ CSS - ลบสีออก ทำให้รูปภาพเป็นขาวดำ) ด้วยเหตุนี้ (และสำหรับการทำงานกับกราฟิกโดยทั่วไป) CSS3 จึงมีเครื่องมือตัวกรองพิเศษ

นี่คือสิ่งที่เราจะใช้

วิธีแก้ไข: ลดความอิ่มตัวของรูปภาพ CSS

ก่อนอื่นมาจัดวางภาพกันก่อน:

จากนั้นเราจะกำหนดสไตล์ให้กับรูปภาพ:

Img ( -webkit-filter: ระดับสีเทา (100%); -moz-filter: ระดับสีเทา (100%); -ms-filter: ระดับสีเทา (100%); -o-filter: ระดับสีเทา (100%); ตัวกรอง: ระดับสีเทา( 100%); ตัวกรอง: สีเทา; /* IE 6-9 */ )

ตอนนี้ภาพของเราจะกลายเป็นขาวดำ

แน่นอนคุณสามารถหยุดอยู่แค่นั้นได้ แต่จะน่าสนใจกว่ามากเมื่อรูปภาพตอบสนองต่อการกระทำของผู้ใช้ด้วย

ฉันเสนอให้ทำเพื่อว่าเมื่อคุณวางเมาส์เหนือรูปภาพ มันก็จะค่อยๆ กลายเป็นสี

ที่จริงแล้ว นี่ไม่ใช่เรื่องยากเลยที่จะทำ และคุณไม่จำเป็นต้องรู้ Javascript เลย

ภาพเคลื่อนไหว CSS ภาพที่เปลี่ยนสี

เพิ่มสไตล์ก่อนหน้าของเราเล็กน้อย:

Img ( -webkit-filter: ระดับสีเทา (100%); -moz-filter: ระดับสีเทา (100%); -ms-filter: ระดับสีเทา (100%); -o-filter: ระดับสีเทา (100%); ตัวกรอง: ระดับสีเทา( 100%); ตัวกรอง: สีเทา; /* IE 6-9 */ ) img:hover ( -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter : ไม่มี; ตัวกรอง: ไม่มี; /* IE 6-9 */ )

ซึ่งจะทำให้รูปภาพกลายเป็นสีเมื่อคุณเลื่อนเมาส์ไปไว้เหนือรูปภาพ ลองใช้การเปลี่ยน CSS3 เพื่อทำให้กระบวนการเปลี่ยนสีเคลื่อนไหว:

Img ( -webkit-filter: ระดับสีเทา (100%); -moz-filter: ระดับสีเทา (100%); -ms-filter: ระดับสีเทา (100%); -o-filter: ระดับสีเทา (100%); ตัวกรอง: ระดับสีเทา( 100%); ตัวกรอง: สีเทา; /* IE 6-9 */ /*เพิ่มโค้ดนี้*/ -webkit-transition: all 1s; -moz-transition: all 1s; /*end of code with transition */ ) img:hover ( -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; ตัวกรอง: none; filter : none; /* IE 6-9 * / )

พารามิเตอร์ทั้งหมดในการเปลี่ยนบอกว่ากฎจะใช้ได้กับทุกสไตล์ และพารามิเตอร์ที่สองคือเวลาของภาพเคลื่อนไหว
ในพารามิเตอร์แรก คุณสามารถระบุคุณสมบัติบางอย่างได้ (เช่น ความสูง เพื่อทำให้เคลื่อนไหวเฉพาะความสูง) และพารามิเตอร์ที่สองระบุเวลาเป็นวินาที (อาจเป็นเศษส่วนทศนิยม - 0.1 วินาที)