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%);
ผู้เขียน goragod โพสต์เมื่อ 08 ส.ค. 2557 เปิดดู 17,587 ป้ายกำกับ CSS3
^