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

    June 1, 2017
    html {
  filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  filter: gray;
}

    การใช้งาน

    <head>
<style>
html {
  filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  filter: gray;
}
</style>
</head>

    การที่เว็บเป็นสีเทาไปหมดทั้งไซต์ คงไม่ใช่เรื่องดีนัก เนื่องจาก บางส่วนของเว็บไซต์อาจมีการใช้สีในการสื่อสาร เช่น การเน้นข้อความสำคัญด้วยสี การแสดงรูปภาพที่มีสีเป็นองค์ประกอบสำคัญของภาพ เช่น รูปภาพตัวอย่างสี ซึ่งถ้ามันไม่มีสีมันก็ไม่มีประโยชน์แต่อย่างใด

    นอกจากนี้คำสั่ง filter แบบครอบจักวาล ยังอาจก่อให้เกิดปัญหาอีกหลายประการเช่น

    เว็บไซต์แสดงผลช้าลง เนื่องจากคำสั่ง filter ใช้พลังงานในการประมวลผลของ Browser ค่อนข้างมาก บนเครื่องที่มีทรัพยากรน้อยๆถึงกับค้างไปเลยก็มี โดยเฉพาะกับ IE
    การแสดงผลผิดเพี้ยน เท่าที่เจอคือคำสั่ง z-Index แสดงผลได้ไม่ถูกต้อง
    การแก้ไข
    เจาะจงลงไปที่บางส่วนของเว็บไซต์ให้เป็นสีเทาก็พอ

    img, header, footer, iframe, .gray {
  filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  filter: gray;
}
.no-gray {
  filter: none;
  -o-filter: none;
  -moz-filter: none;
  -webkit-filter: none;
}
a {
  color: #333;
}
a:hover {
  color: #000;
}

    Credit : kotchasan


เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories