การทำเว็บไซต์ให้เป็นสีเทาด้วย CSS

สวัสดีครับ สำหรับบทเรียนรู้นี้เรามาพูดถึงการปรับแต่งหน้าเว็บไซต์ให้แสดงผลสีเทา โดยการใช้ CSS ซึ่งสามารถทำได้โดยใช้คำสั่งต่อไปนี้

<style>
html{
    -moz-filter: grayscale(100%);
    /* IE */
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter: gray;
    /* Chrome, Safari */
    -webkit-filter: grayscale(1);
    /* Firefox */
    filter: grayscale(1);
}
</style>

หรือ

<style>
html{
           filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
           -webkit-filter: grayscale(100%);
           -moz-filter: grayscale(100%);
           -ms-filter: grayscale(100%);
           -o-filter: grayscale(100%);
           filter: grayscale(100%);
}
</style>

นำไปวางระหว่าง tag <head>...</head> โดยในที่นี้จะกำหนดให้ tag html เพียงเท่านี้ก็จะได้หน้าเว็บสีเทาเรียบร้อยแล้ว ขอบคุณ Ahmad Jehduramae ที่ช่วยเพิ่มเติม

หมายเหตุ ทดสอบใน Google Chrome v53, Firefox v49, Microsoft Edge