CSS Blur Filter: ทำให้ภาพเบลอด้วยฟังก์ชัน blur()

เมื่อออกแบบเว็บไซต์ คุณอาจต้องการเพิ่มเอฟเฟกต์เบลอ (blur) ให้ภาพ เช่น เว็บร้านกาแฟ ต้องการเบลอภาพเพื่อวางข้อความทับด้านหน้าให้อ่านง่าย

นั่นคือที่มาของ CSS blur function ฟังก์ชัน blur ใช้เพิ่มเอฟเฟกต์เบลอให้ภาพ input ที่ระบุ ซึ่งนำไปใช้กับคุณสมบัติ filter เพื่อเบลอภาพ

บทเรียนนี้อธิบายพื้นฐาน CSS blur function และวิธีใช้งาน พร้อมตัวอย่าง จนจบคุณจะใช้ CSS blur อย่างเชี่ยวชาญ

CSS Filter Property

คุณสมบัติ filter ใน CSS ให้นำเอฟเฟกต์กราฟิกส์ไปใช้กับองค์ประกอบบนหน้าเว็บ มักใช้กับภาพและพื้นหลัง

CSS มีหลาย filter เช่น opacity (ปรับความโปร่งใส) drop-shadow (เพิ่มเงา) เป็นต้น

Syntax สำหรับ filter:

filter: filterName(arguments);

บทเรียนนี้เน้นที่ blur() function สำหรับเพิ่มเอฟเฟกต์เบลอให้ภาพ

CSS Blur Function

blur() filter เป็นฟังก์ชัน filter ที่เพิ่มเอฟเฟกต์เบลอให้ภาพ

Syntax:

filter: blur(radius);

radius หมายถึงรัศมีของเอฟเฟกต์เบลอ ค่า radius ยิ่งใหญ่ ยิ่งเบลอมากขึ้น หากระบุ 0 จะไม่มีเบลอเลย

Radius รับค่าความยาวได้ทุกหน่วย: em, px, rem, cm เป็นต้น

ตัวอย่าง: ภาพกาแฟเบลอ 2px

สมมติออกแบบเว็บร้านกาแฟ ต้องการภาพกาแฟ stock photo พร้อมเบลอรัศมี 2px

<html>
  <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091..." height="400" width="600" />
</html>

<style>
  img { filter: blur(2px); }
</style>

CSS Blur Filter: ทำให้ภาพเบลอด้วยฟังก์ชัน blur() — ภาพกาแฟพร้อมเอฟเฟกต์เบลอ 2px

ใน HTML ใช้ <img> ใส่ภาพ stock photo กาแฟ กำหนด height 400px width 600px ใน CSS ใช้ filter: blur(2px) กับทุก <img> ภาพจะดูเบลอเล็กน้อย

หากต้องการหน่วยอื่น แทนที่ "2px" ด้วยค่าที่ต้องการ เช่น blur(1.15em)

สรุป

CSS blur() function สร้างเอฟเฟกต์เบลอให้ภาพบนเว็บ ใช้ร่วมกับคุณสมบัติ filter ตอนนี้คุณพร้อมเพิ่มเอฟเฟกต์เบลอให้ภาพอย่างมืออาชีพแล้ว!