สำหรับการทำรูปภาพและตัวหนังสือเป็นสีขาว-ดำทั้งเว็บไซต์ สำหรับเว็บมาสเตอร์ ถ้าหลายๆท่านเข้าเว็บไซต์ทั้งหลายตั้งแต่วันที่ 14 ตุลาคมที่ผ่านมา จะสังเกตเห็นว่าเว็บไซต์ของคนไทยส่วนใหญ่จะมีการปรับแต่งตัวหนังสือและรูปภาพทั้งหมดเป็นโทนสีขาว-ดำ นั่นก็เพื่อเป็นการร่วมไว้อาลัยถวายแด่ องค์พระบาทสมเด็จพระเจ้าอยู่หัวในพระบรมโกศ รวมถึงเว็บไซต์ วาร์ไรตี้พีซี ดอทเน็ต แห่งนี้ด้วย
วิธีการง่ายๆในการทำให้รูปภาพและตัวหนังสือเป็นโทนสีขาว-ดำทั้งเว็บไซต์อย่างง่าย ก็มีดังนี้ ซึ่งเว็บไซต์ส่วนใหญ่จะมีโครงสร้างไฟล์ css เป็นหลักอยู่แล้ว โดยเฉพาะเว็บไซต์ที่ใช้ CMS อย่าง WordPress, SMF หรือ CMS อื่นๆ และองค์ประกอบภายในจะประกอบไปด้วยแท็ก html, body หรือ img เราก็เพียงนำโค้ดดังต่อไปนี้ไปใส่ลงในแท็กดังกล่าวพร้อมบันทึก แล้วทำการอัพโหลดขึ้นไปบนเว็บโอสติ้ง ก็เป็นเสร็จสิ้นขั้นตอนแล้วครับ
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray(); /* IE 6-9 */
โค้ดดังกล่าวให้ใส่ไว้เฉพาะแท็กใดแท็กหนึ่งของไฟล์ css หรือ style.css ที่อยู่ภายในแท็ก html, body หรือ img
แต่ในกรณีที่เว็บไซต์นั้นๆไม่มีโครงสร้างไฟล์ css หรือ style.css ก็เพียงแค่นำโค้ดดังต่อไปนี้ไปวางระหว่างตำแหน่งแท็ก <head>กับ</head>
<style>
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
html {
-webkit-filter: grayscale(100%);
}
</style>
สำหรับเว็บไซต์ของท่านที่ใช้ Joomla! สามารถดาวน์โหลด plugin ไปติดตั้งเพิ่มเติมได้ที่ http://joomlachannel.com/2016-10-13-12-14-17.html
แล้วนำโค้ดต่อไปนี้ใส่เข้าไป
html {
/* IE */
filter: progidXImageTransform.Microsoft.BasicImage(grayscale=1);
/* Chrome, Safari */
-webkit-filter: grayscale(1);
/* Firefox */
filter: grayscale(1);
filter: grayscale(100%);
filter: gray;
-moz-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
สำหรับ Internet Explorer สำหรับโค้ดด้านบน อาจจะไม่สามารถปรับแต่งได้หรือปรับเปลี่ยนได้ไม่ 100% ก็อาจจะต้องใส่โค้ดต่อไปนี้ลงไปทั้ง 2 แท็กในไฟล์ css ได้แก่ img และ html อีกด้วยครับ
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
}
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
}
