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

wave
มานพ กองอุ่น 13 ต.ค. 2016 22:45:10 12,475

 

สวัสดีครับ สำหรับบทเรียนรู้นี้เรามาพูดถึงการปรับแต่งหน้าเว็บไซต์ให้แสดงผลสีเทา โดยการใช้ 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


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com

เขียนบทเรียนรู้ของคุณ

รายละเอียด
  • ดู 12,475
  • รักเลย 0
  • หมวดหมู่ CSS
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags css grayscale
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009