CSS Blur

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

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

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

ตัวกรอง CSS

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

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

ไวยากรณ์สำหรับการใช้ตัวกรองมีดังนี้:

filter: filterName(arguments);

สำหรับบทช่วยสอนนี้ เราจะเน้นที่ฟังก์ชัน CSS blur ซึ่งเพิ่มเอฟเฟกต์เบลอให้กับรูปภาพ

CSS เบลอ

ฟิลเตอร์เบลอ CSS เป็นฟังก์ชันฟิลเตอร์ที่เพิ่มเอฟเฟกต์เบลอให้กับรูปภาพ

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ไวยากรณ์สำหรับการใช้ฟิลเตอร์เบลอมีดังนี้:

filter: blur(radius);

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

ค่ารัศมีที่คุณระบุสามารถยอมรับค่าความยาวใดๆ เช่น em, px, rem และ cm

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

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

<html>

<img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80" height="400" width="600" />
</html>
  
<style>

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

รหัสของเราส่งคืน: CSS Blur ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

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

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

หรือถ้าเราต้องการระบุรัศมีการเบลอโดยใช้หน่วยวัดอื่น เราสามารถทำได้โดยแทนที่ "2px" ด้วยค่าที่เราต้องการใช้ ดังนั้น หากเราต้องการให้ภาพของเรามีความเบลอด้วยรัศมีการเบลอ 1.15 ม. เราก็สามารถทำได้โดยแทนที่รัศมีการเบลอ "2px" ที่เราระบุไว้ข้างต้น

บทสรุป

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

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