บันทึกการทำงาน ตอน ทำให้หน้าเว็ปเป็น 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 ได้หลากหลายช่องทาง ตามลิงค์ด้านล่างนี้ครับ

1. WordPress: Blog Journey
2. Facebook: Blog Journey Fanpage
3. Twitter: @Blog_Journey_th
4. Blockdit: Blog Journey Page
5. TrueID: @NexUs

Credit
ThaiCreate.com
Mozilla Developer Network
James Padolsey’s Post (Grayscale.js)
7Themes.com Amazing Wallpapers Collections

บทความโดย

Xiao Er แห่งไซเบอร์สเปซ Blog-Journey