CSS3 Filters ใส่ Effect ให้รูปสวย

ด้วยพลังของ CSS3 คุณสามารถจัดการกับ Effect พื้นฐานให้กับรูปภาพได้ เช่น การทำภาพมัว (Blur), เปลี่ยนภาพให้เป็นสีเทา (Glayscale), การปรับความอิ่มตัวของสี (Saruration) และอื่นๆ
รูปแบบการใช้งาน

filter: filtername(value);

/* สำหรับบราวเซอร์อื่นๆต้องเติม prefix ด้วย */

-webkit-filter: filtername(value);

-moz-filter: filtername(value);

-o-filter: filtername(value);

-ms-filter: filtername(value);

filtername ที่รองรับ

Blur การทำภาพมัว (gaussian blur) ค่า value ระบุเป็น พิกเซล (px)
Brightness ปรับตวามสว่างของภาพ ค่าอยู่ระหว่าง 0 (มืด) ถึง 1 (สว่าง)
Saturate ปรับความอิ่มตัวของสี 0% Grayscale, 100% ภาพปกติ และ มากกว่า 100% สีเข้มขึ้น
Hue Rotate ปรับสีของภาพ ระบุค่าเป็น องศา (deg)
Contrast ปรับความเข้มของภาพ 0% สีเทา, 100% ภาพปกติ และ มากกว่า 100% เพิ่มความเข้มของภาพ
Invert กลับสี ระบุค่าเป็นเปอร์เซนต์เช่นกัน
Grayscale เปลี่ยนภาพให้เป็นสีเทา ระบุค่าระหว่าง 0% ถึง 100%
Sepia ทำภาพให้ดูเก่า ระบุค่าระหว่าง 0% ถึง 100%
Opacity ความโปร่งใส ระบุค่าระหว่าง 0 ถึง 1

ความสามาารถนี้อาจแตกต่างกันตามความสามารถของ browser แต่ละยี่ห้อ ก่อนนำไปใช้งานจริงควรตรวจสอบให้ดีก่อน

รูปภาพต้นฉบับ

Blur

filter: blur(5px);

-webkit-filter: blur(5px);

-moz-filter: blur(5px);

-o-filter: blur(5px);

-ms-filter: blur(5px);

Brightness

 filter: brightness(0.2);

-webkit-filter: brightness(0.2);

-moz-filter: brightness(0.2);

-o-filter: brightness(0.2);

-ms-filter: brightness(0.2);

Saturation

 filter: saturate(200%);

-webkit-filter: saturate(200%);

-moz-filter: saturate(200%);

-o-filter: saturate(200%);

-ms-filter: saturate(200%);

Hue Rotate

 filter: hue-rotate(200deg);

-webkit-filter: hue-rotate(200deg);

-moz-filter:hue-rotate(200deg);

-o-filter: hue-rotate(200deg);

-ms-filter: hue-rotate(200deg);

Contrast

 filter: contrast(150%);

-webkit-filter: contrast(150%);

-moz-filter: contrast(150%);

-o-filter: contrast(150%);

-ms-filter: contrast(150%);

Invert

 filter: invert(100%);

-webkit-filter: invert(100%);

-moz-filter: invert(100%);

-o-filter: invert(100%);

-ms-filter: invert(100%);

Grayscale

 filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-o-filter: grayscale(100%);

-ms-filter: grayscale(100%);

Sepia

 filter: sepia(100%);

-webkit-filter: sepia(100%);

-moz-filter: sepia(100%);

-o-filter: sepia(100%);

-ms-filter: sepia(100%);

Opacity

 filter: opacity(0.2);

-webkit-filter: opacity(0.2);

-moz-filter: opacity(0.2);

-o-filter: opacity(0.2);

-ms-filter: opacity(0.2);

Blur + Grayscale

 filter: blur(5px) grayscale(100%);

-webkit-filter: blur(5px) grayscale(100%);

-moz-filter: blur(5px) grayscale(100%);

-o-filter: blur(5px) grayscale(100%);

-ms-filter: blur(5px) grayscale(100%);

0SHAREFacebook Twitter LINE it!