บันทึกการทำงาน ตอน ทำให้หน้าเว็ปเป็น Gray Scale
เพื่อร่วมไว้ถวายอาลัยแก่การสวรรคตของ พระบาทสมเด็จพระปรมินทรมหาภูมิพลอดุลยเดช ทางบริษัทฯ จึงขอให้เปลี่ยนหน้าเว็ปให้เป็นโทนสีเทา ผมจึงได้ลองค้นหาวิธีทำที่สะดวกในการแก้ไขโค้ด และไม่ยุ่งยากซับซ้อน
จาการรวบรวมโค้ดต่างๆ พบว่า วิธีทำนั้นค่อนข้างง่าย และไม่ยุ่งยากอะไร เพียงเพิ่มโค้ดเพียงไม่กี่บรรทัดก็สามารถทำให้หน้าเว็ปกลายเป็น Gray scale ได้ เรามาดูวิธีการกันเลย
การทำ Grayscale สำหรับ Chrome, Firefox, Opera, Safari และ Microsoft Edge
เป็นโค้ดที่ใส่เพิ่มเติมเข้าไปในส่วนของ CSS ตรงส่วนของ BODY tag ตามตัวอย่างข้างล่างนี้ครับ
body { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); } img { width:100%; height:auto; -moz-filter:grayscale(100%); -webkit-filter:grayscale(100%); -o-filter:grayscale(100%); -ms-filter:grayscale(100%); filter:grayscale(100%); }
จากตัวอย่างข้างบน สามาถใช้ได้กับ Chrome, Firefox, Opera, Safari, Microsoft Edge และ Internet Explorer 6 – 9 แต่ไม่สามารถใช้งานบน Internet Explorer 10 และ Internet Explorer 11 ได้
การทำ Grayscale สำหรับ Microsoft Internet Explorer 10 และ 11
เนื่องจากโค้ดด้านบนไม่สามารถใช้ได้ใน IE 10 และ 11 ทำให้ผมต้องพยายามหาวิธีต่อไป จนในที่สุดก็ได้พบกับสิ่งนี้ครับ grayscale.js วิธีใช้ก็แสนง่าย มาดูตัวอย่างกันเลย
$(document).ready(function(){ grayscale($('div')); });
grayscale.js สามารถใช้ได้กับทุก browser เลยครับ ผมใช้ร่วมกับโค้ดด้านบนเลย
โอ้…พระเจ้าจอร์จ มันยอดมว๊ากกก ลองนำไปใช้กันดูครับ ^_^
Download “Grayscale.js” ที่นี่
หวังว่าที่ผมได้รวบรวมมาทั้งหมดนี้ จะเป็นประโยชน์ให้กับผู้ร่วมอาชีพด้วยกันไม่มากก็น้อยนะครับ และผมขอถวายเป็นพระราชกุศลแด่ พระบาทสมเด็จพระปรมินทรมหาภูมิพลอดุลยเดช ครับ
จริงๆ แล้วมีโค้ดที่น่าสนใจอีกหลายตัว ไม่ใช่แค่มีเพียง Grayscale Filter อย่างเดียวนะครับ Filter อื่นๆก็น่าสนใจ ใครสนใจลองอ่านเพิ่มเติมได้ที่ Mozilla Developer Network ในเครดิตด้านล่างนะครับ
ขอขอบคุณความรู้จากทุก ๆ โพสที่ได้เครดิตไว้ด้านล่างนะครับ
สามารถติดตาม Blog Journey ผ่านทาง social media ได้หลากหลายช่องทาง ตามลิงค์ด้านล่างนี้ครับ
- WordPress: Blog Journey
- Facebook: Blog Journey Fanpage
- Twitter: @Blog_Journey_th
- Blockdit: Blog Journey Page
- TrueID: @NexUs
Credit
ThaiCreate.com
Mozilla Developer Network
James Padolsey’s Post (Grayscale.js)
7Themes.com Amazing Wallpapers Collections
บทความโดย
Xiao Er แห่งไซเบอร์สเปซ Blog-Journey