ในสมัยยุคแรกของคนทำเว็บการปรับแต่งภาพเป็นเรื่องที่ยากลำบากมาก เพราะในการปรับแต่ละครั้งก็ต้องเข้าไปที่ Photoshop เพื่อแต่งภาพแล้วมาอัพโหลดทับเข้าไปอีก กว่าจะเปิดโปรแกรมแต่ละตัว กว่าจะ Login FTP เข้าไป Upload file เรียกได้ว่าเหนื่อย

ในบทความนี้เป็นเรื่องของการ Filters ภาพเรียกได้ว่า Photoshop ทำอะไร CSS ก็ทำได้เช่นกัน ผมหวังว่าบทความนี้จะเอาไปใช้ประโยชน์กันได้นะครับ

เริ่มการใช้งาน

Property ของ CSS จะใช้คำสั่ง

filter: function(value);

และก็ใส่ Prefix สำหรับ Browser แต่ละตัวกันด้วยก็จะได้แบบนี้ครับ

filter: function(value);
-webkit-filter: function(value);
-moz-filter: function(value);
-o-filter: function(value);
-ms-filter: function(value);

ผมจะใช้รูปภาพด้านล่างนี้เป็นตัวแม่แบบ สำหรับทำการ Filters ครับ

CSS Filter

Blur

การทำให้ดูเบลอๆ ดูมัวๆ ถ้าคนถ่ายภาพก็พอจะมองออกกับภาพแนวๆ ชัดตื้น(Depth of field) นั่นเองครับ

CSS Filter

filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);

 

Brightness

การปรับภาพ Brightness ก็คือการปรับค่าความสว่างของภาพนั่นเองครับ โดน Value ใน function จะมีค่าตั้งแต่ 0-1 ละค่าทศนิยม เช่น 0.2 แปลว่า 20% ค่ายิ่งน้อยจะยิ่งทำให้ภาพมืด ตัวเลขมาก็จะทำให้ภาพสว่างครับ

CSS Filter

filter: brightness(0.4);
-webkit-filter: brightness(0.4);
-moz-filter: brightness(0.4);
-o-filter: brightness(0.4);
-ms-filter: brightness(0.4);

 

Saturation

คือการทำภาพให้มีสีสดใสหรือดูทึมๆ ลงมาครับ แปลตรงๆ ก็คือความอิ่มตัวของสี

CSS Filter

filter: saturate(50%);
-webkit-filter: saturate(50%);
-moz-filter: saturate(50%);
-o-filter: saturate(50%);
-ms-filter: saturate(50%);

 

Hue-Rotate

จากทฤษฎีสีของ Munsell จะมีการจำลองสีเป็นวงกลม โดยรัศมีของวงกลมจะเป็นสีตามสีรุ้ง การ Hue (ฮิว) ก็คือการเปลี่ยนสีของภาพนั้น หมุนไปตามรัศมีของวงล้อนั่นเองครับ

CSS Filter

filter: hue-rotate(20deg);
-webkit-filter: hue-rotate(20deg);
-moz-filter: hue-rotate(20deg);
-o-filter: hue-rotate(20deg);
-ms-filter: hue-rotate(20deg);

 

Contrast

การเปรียบเทียบความต่าง ถ้าแปลแบบนี้ก็คงจะงงกันอยู่ พูดให้เข้าใจง่ายๆ ก็คือการทำ สี หรือ ความสว่าง เปลี่ยนไปในทางตรงกันข้าม เช่น มืดไปสว่าง ประมาณนั้นครับ

CSS Filter

filter: contrast(150%);
-webkit-filter: contrast(150%);
-moz-filter: contrast(150%);
-o-filter: contrast(150%);
-ms-filter: contrast(150%);

 

Invert

การทำให้ภาพนั้นมีสีตรงกันข้าม เช่น สีดำเป็นขาว

CSS Filter

filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);

 

Grayscale

อันนี้ทุกคนน่าจะรู้จักกันดีแล้วก็คือภาพขาวดำนั่นเองครับ

CSS Filter

filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);

 

Sepia

ภาพซีเปียก็เช่นกัน เป็นภาพที่ให้ดูอารมณ์อบอุ่น ดูเก่าๆ นิดนึง

CSS Filter

filter: sepia(100%);
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);