การปรับภาพด้วย CSS Filter Effects
การปรับภาพ ความสว่าง และ ความแตกต่าง, หรือเปลี่ยนภาพเป็น โทนสีเทา หรือ Sephia เป็นคุณสมบัติทั่วไปที่คุณอาจพบในแอปพลิเคชั่นแก้ไขภาพเช่น Photoshop. แต่ตอนนี้มันเป็นไปได้ที่จะเพิ่มเอฟเฟ็กต์เดียวกันกับภาพบนเว็บโดยใช้ CSS.
ความสามารถนี้มาจากตัวกรองเอฟเฟกต์ซึ่งจริง ๆ แล้วยังอยู่ในขั้นตอนการทำงานของร่าง อย่างไรก็ตามเบราว์เซอร์ Webkit ดูเหมือนจะเป็นขั้นตอนสำคัญในการนำคุณลักษณะนี้ไปใช้.
ดังนั้นเรามาลองดูและเราจะใช้ภาพนี้จากเมห์ขะเพื่อสาธิตผลกระทบ.
ผลกระทบ
การใช้เอฟเฟกต์นั้นง่ายมาก ดูตัวอย่างด้านล่างเพื่อเปลี่ยนภาพเป็น โทนสีเทา
;
img -webkit-filter: โทนสีเทา (100%);
... และนี่คือสำหรับ ซีเปีย
ala Instagram.
img -webkit-filter: ซีเปีย (100%);
ทั้งคู่ ซีเปีย
และ โทนสีเทา
ค่าจะถูกระบุเป็นเปอร์เซ็นต์โดยที่ 100
% คือจำนวนสูงสุดและการสมัคร 0%
จะทำให้ภาพไม่เปลี่ยน แต่เมื่อค่าไม่ได้ระบุไว้อย่างชัดเจน 100%
จะถูกนำมาเป็นค่าเริ่มต้น.
การปรับความสว่างของภาพก็เป็นไปได้และเราสามารถทำได้โดยใช้ ความสว่าง
ฟังก์ชั่นดังต่อไปนี้;
img -webkit-filter: ความสว่าง (50%);
เอฟเฟกต์ความสว่างทำงานเช่นความคมชัดและเอฟเฟกต์ซีเปียด้านบนซึ่งเป็นค่า 0%
จะเก็บภาพตามที่เป็นอยู่และนำไปใช้ 100%
จะทำให้รูปภาพสว่างขึ้นทั้งหมดซึ่งอาจแสดงเฉพาะหน้าขาวที่ว่างเปล่าแทนรูปภาพ.
ผลความสว่างยัง อนุญาตสำหรับค่าลบ, ซึ่งมันจะ ทำให้ภาพมืดลง.
img -webkit-filter: ความสว่าง (-50%);
…และเราสามารถปรับความคมชัดของภาพด้วยวิธีนี้.
img -webkit-filter: ความคมชัด (200%);
มีความแตกต่างเล็กน้อยเกี่ยวกับวิธีการทำงานของค่าเช่นเดียวกับที่คุณเห็นในข้างต้นเราตั้งค่า ความคมชัด ()
โดย 200%
, นี่เป็นเพราะคุณค่าของ 100%
เป็นจุดเริ่มต้นที่ภาพจะยังคงไม่เปลี่ยนแปลง เมื่อค่าต่ำกว่า 100%
, สมมุติว่า 50% ภาพจะมีความเปรียบต่างน้อยลง.
นอกจากนี้เรายังสามารถรวมเอฟเฟกต์ในหนึ่งบล็อกการประกาศเช่นในตัวอย่างด้านล่าง เราเปลี่ยนภาพให้เป็น โทนสีเทา
และเพิ่ม ความแตกต่าง
50% ในเวลาเดียวกัน.
img -webkit-filter: ความคมชัดระดับสีเทา (100%) (150%);
ด้วยการรวมตัวกรองกับการเปลี่ยน CSS3 ทำให้เราสามารถสร้างความสง่างามได้ โฉบ
ผล.
img: โฮเวอร์ -webkit-filter: โทนสีเทา (0%); img: โฮเวอร์ -webkit-filter: ซีเปีย (0%); img: โฮเวอร์ -webkit-filter: ความสว่าง (0%); img: โฮเวอร์ -webkit-filter: ความคมชัด (100%);
สุดท้ายมีเอฟเฟกต์อีกหนึ่งอย่างที่เราสามารถลองได้ เกาส์เบลอ, ซึ่งจะทำให้องค์ประกอบเป้าหมายไม่ชัดเจน.
img: โฮเวอร์ -webkit-filter: เบลอ (5px);
เช่นเดียวกับใน Photoshop ค่าเบลอระบุไว้ในรัศมีพิกเซลและหากไม่ได้ระบุค่าไว้อย่างชัดเจน 0 จะถูกใช้เป็นค่าเริ่มต้นและภาพจะถูกปล่อยให้เป็นไปตามที่กำหนด.
ความคิดสุดท้าย
ในความเป็นจริงมีเอฟเฟกต์เพิ่มขึ้นมากมาย เช่น สีหมุน
, กลับหัวกลับหาง
และ เปียกโชก
, แต่ฉันคิดว่ามันใช้งานได้น้อยกว่าในเว็บจริง ดังนั้นการสนทนาถูก จำกัด เพียงสี่ผล.
และแม้ว่าจะมีการพูดคุยกับรูปภาพในบทช่วยสอนนี้ แต่คุณสมบัติก็สามารถนำไปใช้กับองค์ประกอบใด ๆ ใน DOM ได้.
สุดท้ายคุณสามารถดูการสาธิตสดได้จากลิงค์ด้านล่างนี้ โปรดทราบว่าขณะนี้รองรับตัวกรองเท่านั้น Chrome 19 และเหนือ.
- การสาธิต
- แหล่งดาวน์โหลด