ตัวสร้างตัวกรอง CSS
สร้างและแสดงภาพตัวกรองรูปภาพ CSS แบบกําหนดเอง
Preview
CSS Code
การควบคุมตัวกรอง
ตัวกรองยอดนิยม
Vintage
Neon Glow
Polaroid
ฟิล์มวินเทจ
ศิลปะดิจิทัล
วิธีใช้ตัวกรอง CSS
ตัวกรอง CSS คืออะไร?
ตัวกรอง CSS ช่วยให้คุณใช้เอฟเฟกต์กราฟิก เช่น เบลอหรือการเปลี่ยนสีกับองค์ประกอบ โดยทั่วไปจะใช้สําหรับรูปภาพ พื้นหลัง และเส้นขอบ
สามารถใช้ฟิลเตอร์เพื่อสร้างเอฟเฟกต์ภาพ ปรับปรุงรูปภาพ หรือสร้างองค์ประกอบการออกแบบที่ไม่เหมือนใครโดยไม่ต้องใช้เครื่องมือแก้ไขรูปภาพภายนอก
คุณสมบัติตัวกรอง CSS ที่รองรับ
-
blur()- ใช้การเบลอแบบเกาส์เซียนกับองค์ประกอบ -
brightness()- ปรับความสว่างขององค์ประกอบ -
contrast()- ปรับคอนทราสต์ขององค์ประกอบ -
grayscale()- แปลงองค์ประกอบเป็นระดับสีเทา -
hue-rotate()- ใช้การหมุนเฉดสีกับองค์ประกอบ -
invert()- สลับสีขององค์ประกอบ -
opacity()- ปรับความทึบขององค์ประกอบ -
saturate()- ทําให้องค์ประกอบอิ่มตัวหรือลดความอิ่มตัว -
sepia()- แปลงองค์ประกอบเป็นซีเปีย
วิธีใช้ตัวกรอง
เมื่อใช้โค้ด CSS ที่สร้างโดยเครื่องมือนี้ คุณจะสามารถใช้ตัวกรองกับองค์ประกอบ HTML ใดก็ได้ นี่คือวิธี:
1. เลือกองค์ประกอบ
เลือกองค์ประกอบ HTML ที่คุณต้องการใช้ตัวกรอง นี่อาจเป็นรูปภาพ พื้นหลัง หรือองค์ประกอบอื่นๆ
2. เพิ่มชั้นเรียนหรือรหัส
หากองค์ประกอบยังไม่มีคลาสหรือ ID ให้เพิ่มคลาสหรือรหัสเพื่อให้กําหนดเป้าหมายด้วย CSS ได้ง่ายขึ้น
3. ใช้ตัวกรอง
ใช้ CSSfilterคุณสมบัติในสไตล์ชีตหรือสไตล์อินไลน์ของคุณเพื่อใช้ตัวกรองที่สร้างขึ้น
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. รวมฟิลเตอร์หลายตัว
คุณสามารถรวมฟังก์ชันตัวกรองหลายฟังก์ชันโดยแสดงรายการทีละรายการ โดยคั่นด้วยช่องว่าง
filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);ความเข้ากันได้ของเบราว์เซอร์
ตัวกรอง CSS ได้รับการสนับสนุนอย่างกว้างขวางในเบราว์เซอร์สมัยใหม่ รวมถึง Chrome, Firefox, Safari, Edge และ Opera อย่างไรก็ตาม เบราว์เซอร์รุ่นเก่า เช่น Internet Explorer ไม่รองรับ
Related Tools
ตัวย่อขนาด CSS
บีบอัดและเพิ่มประสิทธิภาพโค้ด CSS ของคุณด้วยความแม่นยําระดับมืออาชีพ
สร้างการแปลง CSS3 ได้อย่างง่ายดาย
เครื่องมือที่ทรงพลังและใช้งานง่ายสําหรับการสร้างการแปลง CSS3 ที่ซับซ้อนโดยไม่ต้องเขียนโค้ด แสดงภาพการเปลี่ยนแปลงแบบเรียลไทม์และคัดลอก CSS ที่สร้างขึ้นเพื่อใช้ในโครงการของคุณ
Less to CSS Converter
แปลงโค้ด Less ของคุณเป็น CSS รวดเร็ว ง่ายดาย และปลอดภัย
CMYK เป็น HSV
แปลงค่าสี CMYK เป็นแบบจําลองสี HSV สําหรับการใช้งานดิจิทัล
สร้างการไล่ระดับสี CSS ที่สวยงามได้อย่างง่ายดาย
สร้างการไล่ระดับสีเชิงเส้น รัศมี และทรงกรวยที่น่าทึ่งด้วยอินเทอร์เฟซที่ใช้งานง่ายของเรา คัดลอกโค้ด CSS และใช้ในโครงการของคุณทันที
ตัวสร้างริบบิ้น CSS
ออกแบบริบบิ้นที่สะดุดตาสําหรับเว็บไซต์ของคุณ