เครื่องมือสร้าง CSS
Filter & Blend
ผสานตัวกรองและการผสมสีด้วยสายตา สร้างโค้ดทันที และส่งออกรูปภาพคุณภาพสูง
พรีเซ็ต
* คุณสามารถลากและวางที่ไอคอน [≡] เพื่อสลับลำดับตัวกรอง
แสดงตัวอย่าง
โค้ด CSS
Tailwind CSS
เกี่ยวกับเครื่องมือสร้าง CSS Filter & Blend
CSS Filter & Blend Generator เป็นเครื่องมือสำหรับนักพัฒนาเว็บที่ให้คุณทดลองใช้คุณสมบัติการประมวลผลรูปภาพที่ทรงพลังของ CSS ด้วยสายตา: filter, backdrop-filter, และ mix-blend-mode จากนั้นเครื่องมือจะสร้างโค้ดให้คุณโดยอัตโนมัติ มันจำลองเอฟเฟกต์ที่ซับซ้อนที่มักพบในแอปแต่งรูปภาพ ทำได้ทั้งหมดบนเบราว์เซอร์ของคุณ และพร้อมนำไปใช้บนเว็บไซต์
คุณสามารถปรับความคอนทราสต์ ความสว่าง ทำภาพเบลอ (blur) ปรับโทนสีซีเปีย (sepia) หรือแม้กระทั่งผสมเลเยอร์ (multiply, screen) เหมือนกับที่ทำใน Photoshop โดยใช้แค่ CSS นอกจากนี้ คุณยังสามารถลากและวางเพื่อสลับลำดับของตัวกรองและดูผลลัพธ์ที่เปลี่ยนไปได้ทันที เครื่องมือนี้ยังรองรับการสร้างคลาสของ Tailwind CSS และสุดท้าย คุณยังสามารถดาวน์โหลดภาพผลลัพธ์เป็นไฟล์ PNG คุณภาพสูงลงในเครื่องของคุณได้อีกด้วย
วิธีใช้งานเครื่องมือนี้
เตรียมรูปภาพตัวอย่าง
ใช้ปุ่ม "เปลี่ยนรูปภาพ" เพื่ออัปโหลดรูปภาพจากอุปกรณ์ของคุณขึ้นมาแสดงตัวอย่าง มั่นใจได้ว่ารูปภาพของคุณจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ใดๆ ในขั้นตอนนี้คุณยังสามารถตั้งค่าสัดส่วนภาพได้ตามต้องการ
เพิ่มและจัดเรียงตัวกรอง
เลือกประเภทของตัวกรอง (เช่น Blur - เบลอ, Contrast - ความคอนทราสต์) แล้วกด "เพิ่ม" จากนั้นใช้แถบเลื่อนเพื่อปรับความเข้ม นอกจากนี้ คุณยังสามารถคลิกที่ไอคอนสามขีดด้านซ้ายของตัวกรองแต่ละตัวเพื่อลากขึ้นลงและจัดเรียงลำดับใหม่ได้
คัดลอกโค้ดและดาวน์โหลดรูปภาพ
ทางด้านขวาของหน้าจอคือโค้ดที่สร้างขึ้น (คุณสามารถเลือกได้ระหว่าง CSS ปกติ หรือ Tailwind CSS) แค่คัดลอกก็เสร็จเรียบร้อย และถ้าหากคุณพอใจกับผลลัพธ์ คุณสามารถกดปุ่ม "บันทึกรูปภาพ" เพื่อดาวน์โหลดรูปภาพ Canvas คุณภาพสูงลงในอุปกรณ์ของคุณได้โดยตรง
คำศัพท์เกี่ยวกับ CSS Filter
- filter
- คุณสมบัติ CSS ที่ใช้เอฟเฟกต์ภาพกับองค์ประกอบ (มักจะเป็นรูปภาพ) มีฟังก์ชันเช่น blur(), brightness(), color() ฟังก์ชันเหล่านี้เขียนแยกกันด้วยช่องว่าง และจะถูกประมวลผลตามลำดับจากซ้ายไปขวา
- backdrop-filter
- คุณสมบัติที่ใช้ในการสร้างเอฟเฟกต์ "กระจกฝ้า" มันใช้ตัวกรองกับพื้นที่ "ด้านหลัง" ขององค์ประกอบ แน่นอนว่าตัวองค์ประกอบด้านหน้าจะต้องมีความโปร่งใส (กึ่งโปร่งใส) เพื่อให้เห็นเอฟเฟกต์นี้ มักใช้ในการทำเอฟเฟกต์ "Glassmorphism" สมัยใหม่
- mix-blend-mode
- คุณสมบัติที่กำหนดวิธีที่องค์ประกอบจะ "ผสม" สีกับเนื้อหาด้านหลัง คล้ายกับการผสมเลเยอร์ใน Photoshop คุณสามารถเลือก multiply, screen, overlay... เพื่อสร้างการแสดงออกทางสีที่ซับซ้อนและมีศิลปะ
- Tailwind CSS
- เฟรมเวิร์ก CSS ยอดนิยมที่เน้นคลาสยูทิลิตี้ เครื่องมือนี้สามารถแปลงการตั้งค่าที่ซับซ้อนของคุณให้เป็นคลาสที่กระชับ เช่น
backdrop-blur-mdหรือmix-blend-multiply
คำถามที่พบบ่อย
- Q.รูปภาพที่อัปโหลดจะถูกบันทึกลงเซิร์ฟเวอร์หรือไม่?
- ไม่ ฟังก์ชันการอัปโหลดใช้สำหรับแสดงผลภายในเบราว์เซอร์ของคุณเท่านั้น (สภาพแวดล้อมภายในเครื่อง) และข้อมูลรูปภาพจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ภายนอกใดๆ ทั้งสิ้น ทำงานได้อย่างปลอดภัยและเกือบจะออฟไลน์อย่างสมบูรณ์
- Q.ความแตกต่างระหว่าง filter และ backdrop-filter คืออะไร?
- คุณสมบัติ `filter` จะใช้เอฟเฟกต์กับองค์ประกอบโดยตรง (เช่น แท็กรูปภาพ) ในทางกลับกัน `backdrop-filter` จะใช้เอฟเฟกต์กับเนื้อหา 'ที่อยู่ด้านหลัง' องค์ประกอบ สำหรับ UI ที่ต้องเบลอพื้นหลังและวางข้อความไว้ด้านหน้า มักจะใช้ `backdrop-filter`
- Q.ทำไมเอฟเฟกต์ถึงไม่เปลี่ยนแปลงเมื่อฉันสลับลำดับตัวกรอง?
- สำหรับบางชุดตัวกรอง เช่น 'Contrast' (ความคอนทราสต์) และ 'Brightness' (ความสว่าง) อาจเห็นความแตกต่างทางสายตาน้อยมากขึ้นอยู่กับลำดับของมัน อย่างไรก็ตาม หากคุณใช้ 'Blur' (เบลอ) ก่อนแล้วตามด้วย 'Contrast' คุณจะเห็นความแตกต่างอย่างชัดเจน (มักจะทำให้ขอบคมขึ้น)
- Q.เกิดข้อผิดพลาดในการบันทึกภาพผลลัพธ์
- หากคุณโหลดรูปภาพจาก URL ภายนอก นโยบายความปลอดภัย CORS (Cross-Origin Resource Sharing) ของเบราว์เซอร์อาจบล็อกการส่งออกรูปภาพไปยัง Canvas กรุณาลองอัปโหลดไฟล์ภาพจากอุปกรณ์ของคุณโดยตรงผ่านปุ่ม 'เปลี่ยนรูปภาพ' แล้วลองอีกครั้ง
ตัวอย่างการใช้งาน
สร้าง UI ด้วยเอฟเฟกต์กระจก (Glassmorphism)
เพียงแค่เปลี่ยนพื้นหลังของหน้าต่าง Modal หรือ Header ให้มีความโปร่งใส (semi-transparent) แล้วรวมกับ backdrop-filter เพื่อเบลอพื้นหลัง คุณก็จะได้ UI ที่ดูหรูหราทันสมัยในสไตล์ของการ์ด UI ของ iOS หรือ macOS
ปรับแต่งรูปภาพพื้นหลัง Hero Header
เมื่อต้องการให้ข้อความโดดเด่นบนภาพพื้นหลัง ให้ลด Brightness ลงเล็กน้อย และเพิ่ม Blur ให้กับรูปภาพพื้นหลังนั้น ข้อความก็จะเด่นชัดขึ้นในขณะที่ยังคงความสวยงามของรูปภาพไว้
สร้างเอฟเฟกต์ Hover ที่น่าทึ่ง
เหมาะสำหรับส่วนประกอบที่มีการเคลื่อนไหว ตัวอย่างเช่น ตั้งค่ารูปภาพเริ่มต้นให้เป็นสีเทา (grayscale) แล้วกลับคืนสีสันที่สดใสพร้อมเพิ่มเงาเมื่อผู้ใช้เลื่อนเมาส์ไปวาง
ลดแสงจ้าของรูปภาพใน Dark Mode
ใช้ร่วมกับ Media Queries ของ CSS เพื่อตรวจสอบว่าระบบปฏิบัติการของผู้ใช้ตั้งค่าเป็นโหมดมืด (Dark mode) หรือไม่ หากเป็นเช่นนั้น ให้ปรับภาพให้มืดลงเล็กน้อย หรือเพิ่มโทนสีซีเปียลงไป เพื่อลดอาการปวดตาในเวลากลางคืน
รายละเอียดทางเทคนิค
ความสำคัญของลำดับตัวกรอง
จุดสำคัญที่สุดใน CSS filter คือ "ลำดับการนำไปใช้" ตัวอย่างเช่น filter: saturate(200%) blur(5px); และ filter: blur(5px) saturate(200%); จะแสดงผลแตกต่างกันโดยสิ้นเชิง แบบแรกจะเพิ่มความอิ่มตัวของสีให้สดใสขึ้นก่อนแล้วค่อยเบลอภาพทั้งหมด ส่วนแบบหลังจะเบลอภาพก่อน แล้วจึงเพิ่มความอิ่มตัวของสีของภาพที่เบลอแล้ว
ด้วยการลากและวางในเครื่องมือนี้ คุณสามารถตรวจสอบและปรับแต่งเอฟเฟกต์ให้ได้ตามที่คุณต้องการได้อย่างรวดเร็ว
การเร่งความเร็วด้วยฮาร์ดแวร์และเทคนิคการส่งออกด้วย Canvas
เอฟเฟกต์ CSS filter เหล่านี้สามารถใช้ GPU ของอุปกรณ์ (การเร่งความเร็วด้วยฮาร์ดแวร์) ในการประมวลผลได้อย่างรวดเร็ว ประสบการณ์บนเบราว์เซอร์จะราบรื่นกว่าการส่งรูปภาพไปให้เซิร์ฟเวอร์ประมวลผลแล้วส่งผลลัพธ์กลับมา
นอกจากนี้ ฟังก์ชัน "บันทึกรูปภาพ" ยังใช้ API globalCompositeOperation ของ Canvas 2D เพื่อจำลองการแสดงผลพิกเซลต่อพิกเซลแบบเดียวกับที่เบราว์เซอร์เรนเดอร์ CSS ทำให้ได้ภาพผลลัพธ์ที่มีคุณภาพสูง
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง