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 รวดเร็ว ง่ายดาย และปลอดภัย
ตัวแปลงจังหวะ
แปลงอัตราการวิ่งระหว่างหน่วยต่างๆ ได้อย่างง่ายดายและคํานวณเวลาและระยะทางโดยประมาณ
เครื่องคํานวณค่าเฉลี่ย
คํานวณค่าเฉลี่ย (ค่าเฉลี่ยเลขคณิต) ของชุดตัวเลขได้อย่างรวดเร็วด้วยเครื่องมือที่ใช้งานง่ายของเรา
HSV เป็น Pantone
แปลงรหัสสี HSV เป็นข้อมูลอ้างอิง Pantone® สําหรับการออกแบบการพิมพ์